Jump to content

Masonry blog title on hover 7.1

Go to solution Solved by Beyondspace,

Recommended Posts

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
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?

image.thumb.png.1cf6176aa6dcc0a203d5d7c59422a6e1.png

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, Keyword Highlighter
If 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
  • Solution
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

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, Keyword Highlighter
If 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
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.