Zoom and overlay effects on Blog thumbnails?

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!

Hi. It looks like you solved this?

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;}

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