Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom CSS Caption, Rollover Effect Disabled Link


jennegel

Question

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?

 

Thanks!

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 0

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{
  filter:brightness(40%);
}
/*transition*/
.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 post
  • 0

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?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...