MoniqueP Posted March 10, 2022 Share Posted March 10, 2022 (edited) Site URL: https://cod-arugula-h424.squarespace.com/home-b Hi there, Password: help1234 I am hoping someone can help with coding for the following. I'm using the inline image block in Squarespace 7.1 with the caption set to display below the image. On hover I'd like the image to rollover into a solid block colour with the caption floating up into the centre of the image. Thank-you! Edited March 13, 2022 by MoniqueP Link to comment
tuanphan Posted March 13, 2022 Share Posted March 13, 2022 It looks like you figured it out? 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
MoniqueP Posted March 14, 2022 Author Share Posted March 14, 2022 11 hours ago, tuanphan said: It looks like you figured it out? Hello @tuanphan, Yes I have mostly figured it out however I can't figure out how to display the caption below the image block when I'm not hovering over it? Can you help..... This is the code I'm using: .image-block-wrapper { filter: brightness(90%) contrast(80%) grayscale(100%); transition: filter .5s ease-in-out; } } .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay .image-caption-wrapper { background: rgba(0,0,0,0); } .image-caption-wrapper h1 { color: red !important; } .image-block-outer-wrapper:hover figcaption { top: 0 !important; display: flex; align-items: center; background-color: #F5F4E7 !important; pointer-events: none; transition: .5s ease-in-out; max-height: 100% !important; justify-content: center; position: absolute !important; } Link to comment
tuanphan Posted March 14, 2022 Share Posted March 14, 2022 8 hours ago, MoniqueP said: Hello @tuanphan, Yes I have mostly figured it out however I can't figure out how to display the caption below the image block when I'm not hovering over it? Can you help..... This is the code I'm using: .image-block-wrapper { filter: brightness(90%) contrast(80%) grayscale(100%); transition: filter .5s ease-in-out; } } .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay .image-caption-wrapper { background: rgba(0,0,0,0); } .image-caption-wrapper h1 { color: red !important; } .image-block-outer-wrapper:hover figcaption { top: 0 !important; display: flex; align-items: center; background-color: #F5F4E7 !important; pointer-events: none; transition: .5s ease-in-out; max-height: 100% !important; justify-content: center; position: absolute !important; } You mean Initial: Show title under image Hover: Show title over overlay Is this right? 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
MoniqueP Posted March 14, 2022 Author Share Posted March 14, 2022 10 hours ago, tuanphan said: You mean Initial: Show title under image Hover: Show title over overlay Is this right? Yes that's correct. Link to comment
MoniqueP Posted March 17, 2022 Author Share Posted March 17, 2022 @tuanphan Any luck with the code at all? 😊 Link to comment
tuanphan Posted March 19, 2022 Share Posted March 19, 2022 On 3/15/2022 at 3:09 AM, MoniqueP said: Yes that's correct. Add this CSS /* Initial: Move title under image */ div#page-section-62294f7df89fdf55311617ee figcaption.image-caption-wrapper { position: relative !important; } 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
MoniqueP Posted March 20, 2022 Author Share Posted March 20, 2022 On 3/19/2022 at 9:10 PM, tuanphan said: Add this CSS /* Initial: Move title under image */ div#page-section-62294f7df89fdf55311617ee figcaption.image-caption-wrapper { position: relative !important; } Hello @tuanphan Thank you! That has moved the title underneath the image but now when I hover the colour and the text on rollover has moved to underneath the image as well instead of over the top of the image?? It looks like this: Instead of this... My code now looks like this... /* Change image to black and white */ Section[data-section-id="62294f7df89fdf55311617ee"] { .image-block-wrapper { filter: brightness(90%) contrast(80%) grayscale(100%); transition: filter .3s ease-in-out; } } /* Remove caption overlay */ .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2).layout-caption-overlay .image-caption-wrapper { background: rgba(0,0,0,0); } /* Change caption font colour */ .image-caption-wrapper h1 { color: black !important; } /* Centre caption and block colour on hover */ .image-block-outer-wrapper:hover figcaption { top: 0 !important; display: flex; align-items: center; background-color: #F5F4E7 !important; pointer-events: none; transition: .3s ease-in-out; max-height: 100% !important; justify-content: center; position: absolute !important; } /* Initial: Move title under image */ div#page-section-62294f7df89fdf55311617ee figcaption.image-caption-wrapper { position: relative !important; } Thank-you! 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