Simonhagstrom Posted January 24, 2022 Posted January 24, 2022 Site URL: https://trumpet-pumpkin-rl4y.squarespace.com/work I would like to have the same hover effect on my images (on all pages), as this site: https://www.graphicalhouse.com/work I think it's so nice that the text "pops" up while the image is getting darker with a slight zoom in. Is this possible to do? Thankful for any help 🙂 https://trumpet-pumpkin-rl4y.squarespace.com/work Pass: hejhej
tuanphan Posted January 25, 2022 Posted January 25, 2022 You mean Initial: Show image, no text Hover: Zoom in image a bit, show text, show overlay Is this right? Simonhagstrom 1 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!)
Simonhagstrom Posted January 25, 2022 Author Posted January 25, 2022 1 minute ago, tuanphan said: You mean Initial: Show image, no text Hover: Zoom in image a bit, show text, show overlay Is this right? Exactly! So basically like the website I linked to.
tuanphan Posted January 26, 2022 Posted January 26, 2022 22 hours ago, Simonhagstrom said: Exactly! So basically like the website I linked to. Add to Design > Custom CSS /* Work page image hover */ @media screen and (min-width:901px) { div#page-5fc5186808845d09242c2ad6 { figcaption.image-card-wrapper { opacity: 0; z-index: 1000000000 !important; } .image-inset:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; } .image-block:hover img { transform: scale(1.2); transition: all 0.3s; } .image-block img { transition: all 0.3s; } .image-block:hover figcaption { opacity: 1; } .image-block:hover .image-inset:after { opacity: 1; }}} 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!)
Simonhagstrom Posted January 26, 2022 Author Posted January 26, 2022 57 minutes ago, tuanphan said: Add to Design > Custom CSS /* Work page image hover */ @media screen and (min-width:901px) { div#page-5fc5186808845d09242c2ad6 { figcaption.image-card-wrapper { opacity: 0; z-index: 1000000000 !important; } .image-inset:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; } .image-block:hover img { transform: scale(1.2); transition: all 0.3s; } .image-block img { transition: all 0.3s; } .image-block:hover figcaption { opacity: 1; } .image-block:hover .image-inset:after { opacity: 1; }}} Fantastic! Thank you so much 🙂 It worked perfectly!!
Simonhagstrom Posted January 27, 2022 Author Posted January 27, 2022 On 1/26/2022 at 10:23 AM, Simonhagstrom said: Fantastic! Thank you so much 🙂 It worked perfectly!! On 1/26/2022 at 9:25 AM, tuanphan said: Add to Design > Custom CSS /* Work page image hover */ @media screen and (min-width:901px) { div#page-5fc5186808845d09242c2ad6 { figcaption.image-card-wrapper { opacity: 0; z-index: 1000000000 !important; } .image-inset:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; } .image-block:hover img { transform: scale(1.2); transition: all 0.3s; } .image-block img { transition: all 0.3s; } .image-block:hover figcaption { opacity: 1; } .image-block:hover .image-inset:after { opacity: 1; }}} Is there any way I can make this apply to all pages? I would like to have it on the home page aswell 🙂 Thanks!
tuanphan Posted January 29, 2022 Posted January 29, 2022 On 1/28/2022 at 4:09 AM, Simonhagstrom said: Is there any way I can make this apply to all pages? I would like to have it on the home page aswell 🙂 Thanks! With current page + homepage, use this new code /* Work page image hover */ @media screen and (min-width:901px) { div#page-5fc5186808845d09242c2ad6, body.homepage { figcaption.image-card-wrapper { opacity: 0; z-index: 1000000000 !important; } .image-inset:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; } .image-block:hover img { transform: scale(1.2); transition: all 0.3s; } .image-block img { transition: all 0.3s; } .image-block:hover figcaption { opacity: 1; } .image-block:hover .image-inset:after { opacity: 1; }}} For all pages, use this code /* Work page image hover */ @media screen and (min-width:901px) { body { figcaption.image-card-wrapper { opacity: 0; z-index: 1000000000 !important; } .image-inset:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; } .image-block:hover img { transform: scale(1.2); transition: all 0.3s; } .image-block img { transition: all 0.3s; } .image-block:hover figcaption { opacity: 1; } .image-block:hover .image-inset:after { opacity: 1; }}} 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!)
Simonhagstrom Posted January 31, 2022 Author Posted January 31, 2022 On 1/29/2022 at 4:17 PM, tuanphan said: With current page + homepage, use this new code /* Work page image hover */ @media screen and (min-width:901px) { div#page-5fc5186808845d09242c2ad6, body.homepage { figcaption.image-card-wrapper { opacity: 0; z-index: 1000000000 !important; } .image-inset:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; } .image-block:hover img { transform: scale(1.2); transition: all 0.3s; } .image-block img { transition: all 0.3s; } .image-block:hover figcaption { opacity: 1; } .image-block:hover .image-inset:after { opacity: 1; }}} For all pages, use this code /* Work page image hover */ @media screen and (min-width:901px) { body { figcaption.image-card-wrapper { opacity: 0; z-index: 1000000000 !important; } .image-inset:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; } .image-block:hover img { transform: scale(1.2); transition: all 0.3s; } .image-block img { transition: all 0.3s; } .image-block:hover figcaption { opacity: 1; } .image-block:hover .image-inset:after { opacity: 1; }}} Thank you very much for the help! I tried it and it worked, but it didn't end up the way I thought. What I would like to try is to have that effect on the homepage, but only on the video.. Thanks again!
tuanphan Posted February 4, 2022 Posted February 4, 2022 On 2/1/2022 at 2:39 AM, Simonhagstrom said: Thank you very much for the help! I tried it and it worked, but it didn't end up the way I thought. What I would like to try is to have that effect on the homepage, but only on the video.. Thanks again! I don't see video? https://trumpet-pumpkin-rl4y.squarespace.com/ 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!)
Simonhagstrom Posted February 7, 2022 Author Posted February 7, 2022 (edited) On 2/4/2022 at 4:11 AM, tuanphan said: I don't see video? https://trumpet-pumpkin-rl4y.squarespace.com/ @tuanphan Do you see it now? Edited February 7, 2022 by Simonhagstrom
Simonhagstrom Posted February 7, 2022 Author Posted February 7, 2022 @tuanphan My mobile version looks absolutely horrible and I don't know how to fix it... The footer has a very large height and takes up way too much space. And I can't scroll all the way down (?) (please see attached print screens). I would be so happy if you could have a look at this 🙂 This is all the code I've out into my css: .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block } @font-face { font-family: 'NeueHaas'; src: url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/6201767c4b483174027e3018/1644263036925/NHaasGroteskTXPro-55Rg.ttf), url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/62017729ac7c02113052a402/1644263209676/NHaasGroteskTXPro-65Md.ttf), url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/62017774e6ca7137a4c86535/1644263284837/NHaasGroteskTXPro-75Bd.ttf);} .Header-nav--primary .Header-nav-item {font-family:NeueHaas;} .Header-branding { display: none; } h2 { font-family: 'NeueHaas';} .Header { position: fixed; z-index: 9999; width: 100%; top: 0px; } h3 { font-family: 'NeueHaas';} h1 { font-family: 'NeueHaas';} a { border-bottom: none !important; } /* Work page image hover */ @media screen and (min-width:901px) { div#page-5fc5186808845d09242c2ad6 { figcaption.image-card-wrapper { opacity: 0; z-index: 1000000000 !important; } .image-inset:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; } .image-block:hover img { transform: scale(1.2); transition: all 2s; } .image-block img { transition: all 1,5s; } .image-block:hover figcaption { opacity: 1; } .image-block:hover .image-inset:after { opacity: 1; }}} header.Header.Header--top { position: fixed; top: 0; width: 100%; z-index: 999; background: ; } .Parallax-item:first-child { top: 0 !important; } /* mobile */ .Mobile.loaded { position: absolute; top: 0; width: 100%; z-index: 999; background: transparent; } .Mobile-bar.Mobile-bar--top { background: transparent; } .Site-inner { min-height: calc(100vh - 7px); } .footer { height: 10px; } .Footer { position: fixed; bottom: 0; left:0; right: 0; }
tuanphan Posted February 12, 2022 Posted February 12, 2022 On 2/8/2022 at 3:36 AM, Simonhagstrom said: @tuanphan My mobile version looks absolutely horrible and I don't know how to fix it... The footer has a very large height and takes up way too much space. And I can't scroll all the way down (?) (please see attached print screens). I would be so happy if you could have a look at this 🙂 This is all the code I've out into my css: .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block } @font-face { font-family: 'NeueHaas'; src: url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/6201767c4b483174027e3018/1644263036925/NHaasGroteskTXPro-55Rg.ttf), url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/62017729ac7c02113052a402/1644263209676/NHaasGroteskTXPro-65Md.ttf), url(https://static1.squarespace.com/static/5e17905e54b69916a2bb2fdc/t/62017774e6ca7137a4c86535/1644263284837/NHaasGroteskTXPro-75Bd.ttf);} .Header-nav--primary .Header-nav-item {font-family:NeueHaas;} .Header-branding { display: none; } h2 { font-family: 'NeueHaas';} .Header { position: fixed; z-index: 9999; width: 100%; top: 0px; } h3 { font-family: 'NeueHaas';} h1 { font-family: 'NeueHaas';} a { border-bottom: none !important; } /* Work page image hover */ @media screen and (min-width:901px) { div#page-5fc5186808845d09242c2ad6 { figcaption.image-card-wrapper { opacity: 0; z-index: 1000000000 !important; } .image-inset:after { content: ""; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; } .image-block:hover img { transform: scale(1.2); transition: all 2s; } .image-block img { transition: all 1,5s; } .image-block:hover figcaption { opacity: 1; } .image-block:hover .image-inset:after { opacity: 1; }}} header.Header.Header--top { position: fixed; top: 0; width: 100%; z-index: 999; background: ; } .Parallax-item:first-child { top: 0 !important; } /* mobile */ .Mobile.loaded { position: absolute; top: 0; width: 100%; z-index: 999; background: transparent; } .Mobile-bar.Mobile-bar--top { background: transparent; } .Site-inner { min-height: calc(100vh - 7px); } .footer { height: 10px; } .Footer { position: fixed; bottom: 0; left:0; right: 0; } Sorry for the delay. Repairing the room. You mean this video? 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!)
Simonhagstrom Posted February 14, 2022 Author Posted February 14, 2022 On 2/12/2022 at 2:41 PM, tuanphan said: Sorry for the delay. Repairing the room. You mean this video? No problem! Yes that's correct.
tuanphan Posted February 19, 2022 Posted February 19, 2022 I suddenly realized I used to help some members to create hover for videos...and then couldn't click on the video control anymore. If you still haven't solved this yet, you try posting to Squarespace Customization Resource Group on FB 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!)
Simonhagstrom Posted May 5, 2022 Author Posted May 5, 2022 On 1/26/2022 at 10:23 AM, Simonhagstrom said: Fantastic! Thank you so much 🙂 It worked perfectly!! @tuanphan - I added one more image on the work page of my website, and these effects don't seem to apply to the new image. Why is that? Thanks!
tuanphan Posted May 8, 2022 Posted May 8, 2022 On 5/5/2022 at 5:42 PM, Simonhagstrom said: @tuanphan - I added one more image on the work page of my website, and these effects don't seem to apply to the new image. Why is that? Thanks! Hi, Can you describe problem again & page url? 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!)
lucestudio Posted January 26, 2023 Posted January 26, 2023 @tuanphan Thank you for this code, it's perfect. Is there a way to apply it to a gallery grid instead of image blocks? No zoom effect. Brine 7.0 Initial: Show image, no text Hover: Show text, show overlay
tuanphan Posted January 28, 2023 Posted January 28, 2023 On 1/27/2023 at 5:31 AM, lucestudio said: @tuanphan Thank you for this code, it's perfect. Is there a way to apply it to a gallery grid instead of image blocks? No zoom effect. Brine 7.0 Initial: Show image, no text Hover: Show text, show overlay Add to Design > Custom CSS (This code for Gallery Grid Section. If you use Gallery Grid Block, please share page url, we can check easier) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment