L_Gal Posted April 28, 2022 Share Posted April 28, 2022 Site URL: https://www.yespeach.com.au/ Hi, I'm trying to recreate this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade Currently I can sort of get it. However when my fade comes in it fades my text as well. Here is what I have... figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } /* title */ .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-masonry-item-wrapper a:after { background: rgba(0,0,0,0.5); /* overlay color */ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after { opacity: 9.75; } .gallery-masonry-item * { color: white; } /* remove gap */ figcaption { padding: 0 !important; } /*text color size in masonry gallery*/ .gallery-caption * { color: #000000 !important; font-size: 30px !important; text-align: center; } /*creates opaque rollover effect for regular image blocks*/ .gallery-masonry-item:hover { background-color: #525a5c; opacity: 0.3; transition: all .5s ease-in-out;} Link to comment
tuanphan Posted May 1, 2022 Share Posted May 1, 2022 Which page are you referring to? I don't see gallery on homepage 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment