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

Edited by jennegel
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Try this CSS

.image-caption p, .image-caption {
	pointer-events: none;

If it doesn't work, can you share link to page where you use image block?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.