Jules_Designsthings Posted October 13, 2021 Posted October 13, 2021 Site URL: http://dragonfly-drum-g8n7.squarespace.com hello! I am trying to get the title of the blog posts to appear on hover when I include a summary block on a landing page. I found a tutorial and copied the code however the title doesnt appear only on hover, it is fixed there. this is my code: @media screen and (min-width:800px) {#block-yui_3_17_2_1_1633664426986_16015 { .summary-item { position: relative; img { transition: all .5s ease!important; } .summary-content { position: absolute; color: #fff!important; top: 50%; left: 50%; opacity: 0; pointer-events: none; transition: all .5s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); } .summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt { color: #FEFCE3!important; font-family: Libre Baskerville; font-size: 13px } } .summary-item:hover { img { -webkit-filter: brightness(70%); filter: brightness(70%); } .summary-content { opacity: 1; } } }} I have also attached a screenshot. This is my first time posting for help so I hope I am doing the right thing! I have a password on my website but not sure if i should paste that on here or not! thank you!
Beyondspace Posted October 13, 2021 Posted October 13, 2021 5 minutes ago, Jules_Designsthings said: Site URL: http://dragonfly-drum-g8n7.squarespace.com hello! I am trying to get the title of the blog posts to appear on hover when I include a summary block on a landing page. I found a tutorial and copied the code however the title doesnt appear only on hover, it is fixed there. this is my code: @media screen and (min-width:800px) {#block-yui_3_17_2_1_1633664426986_16015 { .summary-item { position: relative; img { transition: all .5s ease!important; } .summary-content { position: absolute; color: #fff!important; top: 50%; left: 50%; opacity: 0; pointer-events: none; transition: all .5s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); } .summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt { color: #FEFCE3!important; font-family: Libre Baskerville; font-size: 13px } } .summary-item:hover { img { -webkit-filter: brightness(70%); filter: brightness(70%); } .summary-content { opacity: 1; } } }} I have also attached a screenshot. This is my first time posting for help so I hope I am doing the right thing! I have a password on my website but not sure if i should paste that on here or not! thank you! You can set the protected password and share it for us to check together BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!
Jules_Designsthings Posted October 13, 2021 Author Posted October 13, 2021 thank you! The password is: joyfilled 🙂
tuanphan Posted October 15, 2021 Posted October 15, 2021 On 10/13/2021 at 12:11 PM, Jules_Designsthings said: thank you! The password is: joyfilled 🙂 Don't remove above code. Add this to Design > Custom CSS /* Summary title on hover */ div#block-yui_3_17_2_1_1633664426986_16015 .summary-title { opacity: 0; } div#block-yui_3_17_2_1_1633664426986_16015 .summary-item:hover .summary-title { 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!)
Jules_Designsthings Posted October 15, 2021 Author Posted October 15, 2021 Oh thank you so much it worked!! i really appreciate this!!
Recommended Posts
Archived
This topic is now archived and is closed to further replies.