AltitudeDesign Posted April 13, 2022 Share Posted April 13, 2022 Site URL: https://graphicstructures.squarespace.com/projects Hope someone can assist with this issue. My site - https://graphicstructures.squarespace.com/projects - pass: preview Below is the code I am currently using for the title on hover however only the title text links and not the square itself. How would I like the whole block? blog-masonry .blog-item-summary { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; opacity: 0; transition: all .3s ease; height: 100%; } .blog-masonry .masonry-ready .entry.is-loaded:hover .blog-item-summary { cursor: pointer; opacity: 1; transition: all .3s ease; z-index:100; } .blog-masonry .masonry-ready .entry.is-loaded:hover img {opacity: 0.9;} .blog-masonry .blog-item-summary { display: flex; place-items: center; justify-content: center; } .blog-title {background-color: rgba(255,255,255,0); color:#000 !important;} Link to comment
Beyondspace Posted April 13, 2022 Share Posted April 13, 2022 21 minutes ago, AltitudeDesign said: Site URL: https://graphicstructures.squarespace.com/projects Hope someone can assist with this issue. My site - https://graphicstructures.squarespace.com/projects - pass: preview Below is the code I am currently using for the title on hover however only the title text links and not the square itself. How would I like the whole block? blog-masonry .blog-item-summary { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; opacity: 0; transition: all .3s ease; height: 100%; } .blog-masonry .masonry-ready .entry.is-loaded:hover .blog-item-summary { cursor: pointer; opacity: 1; transition: all .3s ease; z-index:100; } .blog-masonry .masonry-ready .entry.is-loaded:hover img {opacity: 0.9;} .blog-masonry .blog-item-summary { display: flex; place-items: center; justify-content: center; } .blog-title {background-color: rgba(255,255,255,0); color:#000 !important;} It looks fine at the moment when I hover each item. Have you figured it out? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) 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! Link to comment
AltitudeDesign Posted April 13, 2022 Author Share Posted April 13, 2022 5 minutes ago, bangank36 said: It looks fine at the moment when I hover each item. Have you figured it out? The blocks don't click through though, only the piece of text. Can you help? Link to comment
Solution Beyondspace Posted April 14, 2022 Solution Share Posted April 14, 2022 7 hours ago, AltitudeDesign said: The blocks don't click through though, only the piece of text. Can you help? Try .blog-title a:after { content:''; width: 100vw; height: 100vh; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .blog-item-summary { overflow:hidden; } Let me know how it goes on your site AltitudeDesign 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) 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! Link to comment
AltitudeDesign Posted April 14, 2022 Author Share Posted April 14, 2022 14 hours ago, bangank36 said: Try .blog-title a:after { content:''; width: 100vw; height: 100vh; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .blog-item-summary { overflow:hidden; } Let me know how it goes on your site You are a genius, worked perfect, 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