Jump to content

Hover zoom effect on blog post images

Recommended Posts

  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

On 7/29/2023 at 10:18 PM, camhick706 said:

Yes but show text initially as well

So the effect will be

Initial: Show image, show text over image

Hover: Show image, show text over image + zoom image a bit?

Is that right?

Add to Design > Custom CSS

/* Blig List - Hover Effect */
.blog-basic-grid--text {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 1;
    transition: all 0.3s;
}
article.blog-basic-grid--container.entry.blog-item{
    position: relative !important;
    transform: unset !important;
}
article.blog-basic-grid--container.entry.blog-item:hover img {
    transform: scale(1.2);
    transition: all 0.3s ease;
}
img {
    transition: all 0.3s ease;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

That's essentially what I'm going for but is it also possible to left align the text anchored to the bottom left corner of the image like in this screenshot?-

Also trying to add a black gradient at the bottom of the image to make the text stand out

Screenshot 2023-07-31 at 7.16.07 PM.png

Link to comment

Try this new code

/* Blig List - Hover Effect */
.blog-basic-grid--text {
    position: absolute;
    left: 10px;
    bottom: 10px;
    text-align: left;
    opacity: 1;
    transition: all 0.3s;
    background-color: rgba(0,0,0,0.5)
}
article.blog-basic-grid--container.entry.blog-item{
    position: relative !important;
    transform: unset !important;
}
article.blog-basic-grid--container.entry.blog-item:hover img {
    transform: scale(1.2);
    transition: all 0.3s ease;
}
img {
    transition: all 0.3s ease;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/4/2023 at 8:31 AM, camhick706 said:

This is what I am getting here- the gradient doesnt span the full width of the image. I'd also like it to go a bit higher than the text itself if possible

Screenshot 2023-08-03 at 9.29.16 PM.png

Use this new code

/* Blig List - Hover Effect */
.blog-basic-grid--text {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: left;
    opacity: 1;
    transition: all 0.3s;
    background-color: rgba(0,0,0,0.5);
    width: 100% !important;
}
.blog-basic-grid--text>* {
    padding-bottom: 10px;
    padding-left: 10px;
}
article.blog-basic-grid--container.entry.blog-item{
    position: relative !important;
    transform: unset !important;
}
article.blog-basic-grid--container.entry.blog-item:hover img {
    transform: scale(1.2);
    transition: all 0.3s ease;
}
img {
    transition: all 0.3s ease;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.