Jump to content

Custom CSS Caption, Rollover Effect Disabled Link

Recommended Posts

Hi all,

I've been trying to put together some custom CSS to give my images a rollover effect in which the captions appear on top of the image with a dark overlay (shown in the attached images). I'm by no means a CSS expert, so I've been compiling code from different forums, and put together this:

.layout-caption-overlay-hover .image-caption-wrapper {background:#000000; opacity: .95 !important; min-height: 100%; top:0!important}  
 .layout-caption-overlay-hover .image-caption-wrapper h1, .layout-caption-overlay-hover .image-caption-wrapper p{color:#ffffff!important;  text-align: center !important} 

.image-caption {
 left: 50%;
 position: absolute;
 top: 50%;
 width: 80%;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
} p {
 font-size: 21px !important;
 font-weight: semibold !important;
 color: #ffffff !important;
 text-transform: uppercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 1 !important

The issue is that it disables the image link, so my images don't take you anywhere. What can I add to the code to fix this?



Screen Shot 2020-08-13 at 8.49.29 PM.png

Screen Shot 2020-08-13 at 8.49.37 PM.png

Link to comment
  • Replies 2
  • Views 330
  • Created
  • Last Reply

Hi Jennegel,

Here's some code that I've written before for rollover effects - the link should still works with this code.

/*rollover image effect*/
.image-block figcaption{
  opacity: 0;
/*on hover*/
.image-block:hover figcaption{
  opacity: 1;
.image-block:hover img{
.image-block figcaption, .image-block:hover img, .image-block img, .image-block:hover figcaption{
  transition: .5s;



Screenshot 2020-08-14 at 13.05.41.png

Screenshot 2020-08-14 at 13.05.52.png

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.