Susannah Posted October 12, 2022 Share Posted October 12, 2022 Can someone help? I want some text headings to sit over the images in a gallery on 7.1. I have this code below but I DON'T want it to hover, just be there all the time. I've experimented to try and remove the hover myself but I just keep breaking it. I've put this in the code injection on the page with the gallery, and it looks perfect... but only on hover! <style> .gallery-caption { position: absolute; top: 0; left: 0; /* You can replace the color here with a different color */ background-color: rgba(0,0,0,0); height: 100%; max-width: unset; padding: 0; opacity: 0; -webkit-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1); -moz-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1); -o-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1); -ms-transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1); transition: visibility 600ms cubic-bezier(.4,0,.2,1),opacity 600ms cubic-bezier(.4,0,.2,1); } .gallery-caption-content { /* You can change the color of your image caption here */ color: #FFFFFF; font-size: 40px !important; font-weight: 500 !important; } .gallery-caption-grid-simple { transition-delay: 0ms; } .gallery-caption { pointer-events: none; } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; } </style> Link to comment
tuanphan Posted October 19, 2022 Share Posted October 19, 2022 Change this line opacity: 0; to opacity: 1; 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
Create an account or sign in to comment
You need to be a member in order to leave a comment