Jump to content

Zoom and overlay effects on Blog thumbnails?

Recommended Posts

Site URL: https://www.goodmonday.se/en/blog

Hi,

Is there a way to have the blog thumbnails to zoom and show an overlay on hover (for example a white or black overlay in opacity)? I'd like the blog thumbnails to behave the same way as the gallery thumbnails does on the below test page (using code from this forums)?

https://www.goodmonday.se/en/blog

The first section on this page uses a "gallery masonry grid" and the section below uses a "Summary" that lists my blog page.

Many thanks!

Link to comment
  • Replies 3
  • Views 886
  • Created
  • Last Reply

Top Posters In This Topic

  • 10 months later...
On 2/2/2021 at 1:35 AM, tuanphan said:

Hi. It looks like you solved this?

I didn't and I very much need some help! lol

Here's what I've attempted, but I can't get it to stay within the container:

//Hover state//
.BlogList-item img {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing:grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property:transform;
  transition-property:transform;
}
.blog-basic-grid .image-wrapper:hover,
.blog-basic-grid .image-wrapper:active {
 -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.image-wrapper {
    overflow: hidden;}

 

Link to comment
On 12/30/2021 at 7:01 AM, katiedunnit said:

I didn't and I very much need some help! lol

Here's what I've attempted, but I can't get it to stay within the container:

//Hover state//
.BlogList-item img {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing:grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property:transform;
  transition-property:transform;
}
.blog-basic-grid .image-wrapper:hover,
.blog-basic-grid .image-wrapper:active {
 -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.image-wrapper {
    overflow: hidden;}

 

Can you share link to blog? We can  check easier

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!)

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.