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 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
Burchard Posted February 2, 2021 Author Share Posted February 2, 2021 (edited) Hi Tuan. I have, thanks to your help 🙂 I really appreciate your input, will post the solution I went with for future reference Edited February 2, 2021 by Burchard grammar Link to comment
Solution Burchard Posted February 2, 2021 Author Solution 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
Create an account or sign in to comment
You need to be a member in order to leave a comment