LiaJane Posted August 20, 2020 Share Posted August 20, 2020 Site URL: http://liaheinze.com Hi there –– Hoping someone can help me add a a title and change of opacity when hovering over image links in my gallery grid. Thanks 🙂 Link to comment
tuanphan Posted August 20, 2020 Share Posted August 20, 2020 Add to Home > Design > Custom CSS /* Grid hover - tuanphan */ figure.gallery-grid-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-grid-item:hover .gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #f4f6ea; content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity ease 200ms !important; } .gallery-grid-item:hover .gallery-grid-item-wrapper a:after { opacity: 0.75; } /* remove gap */ figcaption { padding: 0 !important; } /* END Grid hover - tuanphan */ 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
LiaJane Posted August 20, 2020 Author Share Posted August 20, 2020 @tuanphan Thanks for the response! That didn't seem to do the trick. This is the only code I have input, in order to make the masonry gallery stack in one column on mobile -- could it be affecting it in some way, and causing your code to not show any changes? @media (max-width: 800px) { .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } .gallery-masonry .gallery-masonry-wrapper { columns: 1; column-gap: 0; padding: 0px; height: auto!important; display: block!important; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; padding: 0px 0px 10px !important; transform: none!important; width: 100%!important; display: block; } .header-nav-item--active a { background-image: none; } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.