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? Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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