-
Posts
3,872 -
Joined
-
Last visited
-
Days Won
8
derricksrandomviews's Achievements
Single Status Update
See all updates by derricksrandomviews
-
Hi there!
I have been trying to find a code for 7.0 to create a hover effect for my title on my gallery block. You are the only person on the forum that I have found so far that is helping so far! I found this code you posted:
/* ** in gallery grid, set a hover over slide effect to ** display slide title on partially transparent ** overlay */ .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper .image-slide-title { position: absolute; bottom: 0; width: 100%; height: 0; color: white; background-color: rgba(194, 194, 163, .8); opacity: 0; transition: all .25s ease-in; } .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper:hover .image-slide-title { height: 40%; opacity: .9; }
Which has worked brilliantly! The only question I have is if I wanted the title to instead fade in instead of slide up how can I alter the code above? Do you have any suggestions?
Thank you so much in advance!!! - Jacqueline
-
This may work, emphasis on may. You can post it in custom css or if you have business plan put it on a single page with the <style> command at each end. Make sure title is enable just like with the slide up code.
.sqs-gallery-design-grid-slide:hover { -webkit-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); -moz-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); -ms-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); -o-transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); transition: all 300ms cubic-bezier(0.420, 0.000, 0.580, 1.000); opacity: 0; }
If you were to use a gallery page (not block) with the same images, put that in the unlinked setction of your site, then create a summary block on a page pulling from that gallery page then there is code for that to have the title/description show up on hover.
https://schwartz-edmisten.com/blog/title-appear-when-hovering-on-summary-block