Burchard Posted January 25, 2021 Share Posted January 25, 2021 Site URL: https://www.maartenrots.nl/slideshow-test Hi there, I'm using Brine (Moksha) and want to modify the hover effect on slideshow gallery images. I have found some CSS code that helps me change certain things, but I am not getting to the result I have in mind. I would like the hover effect to cover the full image, instead of just a small area in the center. It will have to remain clickable as it will link to a page on my website. On mobile devices I would like the title and description to appear below the image. I am testing this on the following page: https://www.maartenrots.nl/slideshow-test At the moment I am using the following (incomplete) code: .sqs-block-gallery .sqs-gallery-block-slideshow { .meta .meta-inside { background-color: rgb(255, 255, 255,); } .meta-title { text-align: center; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; padding: 6px 20px; color: #042663; } .meta-description p { text-align: center; color: #9DB0D8; font-size: 12px; letter-spacing: 1px; padding-top: 4px; max-width: 550px; } .meta-description a:link { color: #9DB0D8; text-align: center !important; } .sqs-gallery-design-stacked-slide:hover { } @media (max-width : 667px) { .meta { display: block !important; max-width: 70% !important; min-width: 70% !important; left: 50% !important; } .meta-title { font-size: 12px; } .meta-description p { display: none; } } } I would really appreciate some input, thanks in advance! Link to comment
tuanphan Posted February 2, 2021 Share Posted February 2, 2021 Hi. Have you solved this yet? 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
Burchard Posted February 2, 2021 Author Share Posted February 2, 2021 Hi Tuan. I have, thanks to your help 🙂 I really appreciate your input, will post the solution I went with for future reference Link to comment
Burchard Posted February 2, 2021 Author Share Posted February 2, 2021 I ended up using a third party plugin to turn the grid gallery inot a masonry-style gallery, found here: https://www.sqspthemes.com/plugins/masonry-style-squarespace-gallery-plugin I used the below code to dim the image and make the title appear. Also, I used <BR><SMALL> in the title to create a subtitle. /* Hover effect */ .image-slide-anchor:hover {opacity: 0.05} .sqs-gallery-block-grid .slide .margin-wrapper { display: flex; flex-direction: column; } .image-slide-title { pointer-events: none; } @media screen and (min-width: 900px) { .sqs-gallery-block-grid .slide .margin-wrapper { flex-direction: column-reverse; } .sqs-gallery-block-grid .slide .margin-wrapper a { transform: translateY(15px); } } /* Show title on hover */ @media screen and (min-width:901px) { .image-slide-title { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%,-50%); opacity: 0; } a:hover + .image-slide-title { opacity: 1; } } Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.