LenW Posted February 24, 2021 Share Posted February 24, 2021 Hi! I am struggling to figure out how to have an image darken when the mouse hovers over it, rather than lighten to the color of the background. I'm working in the Forte template, into which I Frankensteined some code pieced together from various other forum posts and need some help with how to edit it so that the image darkens on hover(like this: http://demo.squarestud.io/grid-gallery-9). I'm pasting the code in use on the site below. Please help me, this is my first foray into code and I am totally clueless! Code: .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor { opacity: .4; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: 0px; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: 0em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; margin-bottom: 0px !important; pointer-events: none; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { color: #000000; opacity: 0; text-transform: uppercase; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: #000000; opacity:1; text-transform: uppercase; vertical-align: middle; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } @media only screen and (max-width: 400px) { .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: transparent; opacity: 0; } } header#header { padding-bottom: 20px; } Link to comment
tuanphan Posted March 1, 2021 Share Posted March 1, 2021 Can you share link to page where you use gallery? We can help easier 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
LenW Posted March 1, 2021 Author Share Posted March 1, 2021 Hi! Here is the link: http://www.erinsanger.com/ Link to comment
tuanphan Posted March 3, 2021 Share Posted March 3, 2021 On 3/1/2021 at 10:21 PM, LenW said: Hi! Here is the link: http://www.erinsanger.com/ Add to Design > Custom CSS /* Darken summary on hover */ div#block-yui_3_17_2_1_1611589263652_6335 .slide a:after { position: absolute; content: ""; background: rgba(0,0,0,0.5); z-index: 999; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.5s; } div#block-yui_3_17_2_1_1611589263652_6335 .slide a { position: relative; } div#block-yui_3_17_2_1_1611589263652_6335 .slide a { position: relative; opacity: 1 !important; } div#block-yui_3_17_2_1_1611589263652_6335 .slide:hover a:after { opacity: 1; } 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
LenW Posted March 3, 2021 Author Share Posted March 3, 2021 This is amazing!! One question though - I want the text to be white and overlay on top of the darken effect. When I added this code in and made the text white, this darken overlay makes the white text darken to grey - I attached an image. Any thoughts on how to fix this or if it is possible? Thank you again SO much - I so appreciate your help as a clueless squarespace user! Link to comment
tuanphan Posted March 7, 2021 Share Posted March 7, 2021 On 3/3/2021 at 9:38 PM, LenW said: This is amazing!! One question though - I want the text to be white and overlay on top of the darken effect. When I added this code in and made the text white, this darken overlay makes the white text darken to grey - I attached an image. Any thoughts on how to fix this or if it is possible? Thank you again SO much - I so appreciate your help as a clueless squarespace user! Don't remove above code. Add this code a.image-slide-anchor.content-fill { opacity: 1 !important; } a.image-slide-anchor.content-fill:after { content: ""; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.5s; } .slide:hover a.image-slide-anchor.content-fill:after { opacity: 1; } .image-slide-title { color: white !important; pointer-events: none; z-index: 10000; } 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
LenW Posted March 29, 2021 Author Share Posted March 29, 2021 @tuanphan one more question for you! The cursor remains the black arrow instead of turning into the hand indicating a clickable link - is there any way to fix this so the cursor turns into the pointer finger on hover? Thanks a million for all your help - it's a HUGE lifesaver! Link to comment
tuanphan Posted March 31, 2021 Share Posted March 31, 2021 On 3/29/2021 at 9:40 PM, LenW said: @tuanphan one more question for you! The cursor remains the black arrow instead of turning into the hand indicating a clickable link - is there any way to fix this so the cursor turns into the pointer finger on hover? Thanks a million for all your help - it's a HUGE lifesaver! Try remove pointer-events: none; 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
LenW Posted April 2, 2021 Author Share Posted April 2, 2021 @tuanphan that just turned the mouse into a text cursor. Any other ideas that might help? I'm posting the current custom code - maybe seeing it will help! Thanks again!! /* Darken summary on hover */ div#block-yui_3_17_2_1_1611589263652_6335 .slide a:after { position: absolute; content: ""; background: rgba(0,0,0,0.5); z-index: 999; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.5s; } div#block-yui_3_17_2_1_1611589263652_6335 .slide a { position: relative; } div#block-yui_3_17_2_1_1611589263652_6335 .slide a { position: relative; opacity: 1 !important; } div#block-yui_3_17_2_1_1611589263652_6335 .slide:hover a:after { opacity: 1; } a.image-slide-anchor.content-fill { opacity: 1 !important; } a.image-slide-anchor.content-fill:after { content: ""; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.5s; } .slide:hover a.image-slide-anchor.content-fill:after { opacity: 1; } .image-slide-title { color: white !important; z-index: 10000; } .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor { opacity: .4; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: 0px; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: 0em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; margin-bottom: 0px !important; pointer-events: none; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { color: #000000; opacity: 0; text-transform: uppercase; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: #000000; opacity:1; text-transform: uppercase; vertical-align: middle; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } @media only screen and (max-width: 400px) { .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: transparent; opacity: 0; } } header#header { padding-bottom: 20px; } Link to comment
tuanphan Posted April 5, 2021 Share Posted April 5, 2021 On 4/2/2021 at 10:08 PM, LenW said: @tuanphan that just turned the mouse into a text cursor. Any other ideas that might help? I'm posting the current custom code - maybe seeing it will help! Thanks again!! /* Darken summary on hover */ div#block-yui_3_17_2_1_1611589263652_6335 .slide a:after { position: absolute; content: ""; background: rgba(0,0,0,0.5); z-index: 999; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.5s; } div#block-yui_3_17_2_1_1611589263652_6335 .slide a { position: relative; } div#block-yui_3_17_2_1_1611589263652_6335 .slide a { position: relative; opacity: 1 !important; } div#block-yui_3_17_2_1_1611589263652_6335 .slide:hover a:after { opacity: 1; } a.image-slide-anchor.content-fill { opacity: 1 !important; } a.image-slide-anchor.content-fill:after { content: ""; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.5s; } .slide:hover a.image-slide-anchor.content-fill:after { opacity: 1; } .image-slide-title { color: white !important; z-index: 10000; } .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor { opacity: .4; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: 0px; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: 0em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; margin-bottom: 0px !important; pointer-events: none; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { color: #000000; opacity: 0; text-transform: uppercase; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: #000000; opacity:1; text-transform: uppercase; vertical-align: middle; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } @media only screen and (max-width: 400px) { .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: transparent; opacity: 0; } } header#header { padding-bottom: 20px; } ah, add this code .slide a:after { cursor: pointer; } 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
LenW Posted April 5, 2021 Author Share Posted April 5, 2021 That worked!! Thank you SO much :D Link to comment
KathySol Posted April 4, 2022 Share Posted April 4, 2022 Hi ! Could you please help me out on the same subject? I would like to apply the code to my site but I think I'm doing something wrong and its not working, or maybe I'm missing a step ? I have images on the bottom of the site where I want them to turn dark and with text overlay on hover. Here is my page : https://www.tykhe.xyz/bairro-alto Thank you ! Link to comment
tuanphan Posted April 5, 2022 Share Posted April 5, 2022 19 hours ago, KathySol said: Hi ! Could you please help me out on the same subject? I would like to apply the code to my site but I think I'm doing something wrong and its not working, or maybe I'm missing a step ? I have images on the bottom of the site where I want them to turn dark and with text overlay on hover. Here is my page : https://www.tykhe.xyz/bairro-alto Thank you ! You mean More Project Images? Can you enable text first? We don't see any text to check the code 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
KathySol Posted April 5, 2022 Share Posted April 5, 2022 Yes exactly, in more projects images I would like the text to hover. I now enabled the caption below is that what you meant ? Sorry I'm new to this! Link to comment
KathySol Posted April 5, 2022 Share Posted April 5, 2022 I changed it at this page : https://www.tykhe.xyz/alcantara Link to comment
tuanphan Posted April 6, 2022 Share Posted April 6, 2022 22 hours ago, KathySol said: I changed it at this page : https://www.tykhe.xyz/alcantara Add to Design > Custom CSS /* Alcantara */ body#collection-623c99f8d822f26856068ea3 { figure.gallery-grid-item { position: relative; } .gallery-caption { position: static; } /* title */ figcaption.gallery-caption .gallery-caption-wrapper p.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-wrapper p.gallery-caption-content { opacity: 1 !important; } /* overlay */ .gallery-grid-item-wrapper a:after { background: #f4f6ea; /* overlay color */ 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; }} 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
KathySol Posted April 7, 2022 Share Posted April 7, 2022 Thank you so much that's really helpful !!! just one question, how can I make the overlay text white and in the same font as the main menu of the website ? Link to comment
KathySol Posted April 7, 2022 Share Posted April 7, 2022 And also which part of the code do i need to change to make it work for the other pages ? Thank you !! Link to comment
KathySol Posted April 9, 2022 Share Posted April 9, 2022 Actually i figured it out so i'm fine ! thanks so much for your help ! tuanphan 1 Link to comment
gppp96 Posted May 10, 2022 Share Posted May 10, 2022 Hi all. I would like to achieve the same results of lenW website. I would like to add an opaque white layer on the image with a black title and subtitle on it when the cursor goes on top. this is the page https://apricots-tunny-yy4c.squarespace.com/nuova-pagina password Hiro96 Thank you! Link to comment
gppp96 Posted May 10, 2022 Share Posted May 10, 2022 like this website http://www.erinsanger.com/ but with white shadow on the image and black font title + subtitle. Link to comment
tuanphan Posted May 13, 2022 Share Posted May 13, 2022 On 5/10/2022 at 7:00 PM, gppp96 said: Hi all. I would like to achieve the same results of lenW website. I would like to add an opaque white layer on the image with a black title and subtitle on it when the cursor goes on top. this is the page https://apricots-tunny-yy4c.squarespace.com/nuova-pagina password Hiro96 Thank you! You mean Hover: Show white overlay + Show title + Show subtitle. Title/sub will over image on center 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
tuanphan Posted May 15, 2022 Share Posted May 15, 2022 On 5/13/2022 at 2:54 PM, gppp96 said: yes With subtitle, use this code body#collection-6279314ca417ed4a39ac61a0 { figure p.gallery-caption-content:after { display: block; position: absolute; top: calc(~"50% + 10px"); } figure:nth-child(1) p.gallery-caption-content:after { content: "subtitle 1"; } figure:nth-child(2) p.gallery-caption-content:after { content: "subtitle 2"; } figure:nth-child(3) p.gallery-caption-content:after { content: "subtitle 3"; }} 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment