jennegel Posted August 14, 2020 Share Posted August 14, 2020 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! Link to comment
willhammond Posted August 14, 2020 Share Posted August 14, 2020 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; } Link to comment
tuanphan Posted August 15, 2020 Share Posted August 15, 2020 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.