Hovering effect on blog summary images

Hi!

I have a summary block on my homepage to preview my blog. I'd like to add a hovering effect when hovering over the images to make the design a bit more responsive if that's the right word.

Is this possible?

https://www.kristinkuehn.com

Pw: 2eRFn7gQ

Many thanks!

Hi @Aurora,

What effect would you like to add on hover? What type of summary block is it (grid, carousel, etc.)? 

Please share your site URL so we can take a look! 

— Hannah
Studio Founded

7 minutes ago, studiofounded said:

Hi @Aurora,

What effect would you like to add on hover? What type of summary block is it (grid, carousel, etc.)? 

Please share your site URL so we can take a look! 

— Hannah
Studio Founded

Thanks Hannah, I added the site to the top post. I'm using a grid. As for the hovering effect, I think the image gets a little lighter usually, is that it?

Hi @Aurora

There are a lot of possible hover effects (zoom, grayscale to color, rotate, etc.) 

To change the summary image brightness, you can paste this into the custom CSS panel and adjust the brightness value!

.sqs-gallery-design-autogrid .summary-item:hover img{ 
filter: brightness(150%);
}

— Hannah
Studio Founded

1 minute ago, studiofounded said:

Hi @Aurora

There are a lot of possible hover effects (zoom, grayscale to color, rotate, etc.) 

To change the summary image brightness, you can paste this into the custom CSS panel and adjust the brightness value!

.sqs-gallery-design-autogrid .summary-item:hover img{ 
filter: brightness(150%);
}

— Hannah
Studio Founded

Thank you so much, Hannah. I think I was thinking of the Zoom effect. Would you mind sending me the code for that?

15 hours ago, studiofounded said:

@Aurora Yes — you can try this!

.sqs-gallery-design-autogrid .summary-item:hover img{ 
transform: scale(1.2);
transition: 1s ease-in-out;
}
.sqs-gallery-design-autogrid .summary-item img{ 
transition: 1s ease-in-out;
}

@studiofounded thank you! I'd like to add the same effect to the images on the blog page as well (its called "writing" on my site). Is that possible?

@studiofounded I saw another hovering effect that I'd like to try on my site where the block moves up just a little bit. Is that possible?

Many thanks again!

Use this CSS code for Writing blog page

/* blog hover */
.blog-alternating-side-by-side .blog-item.is-loaded:hover section.blog-image-wrapper {
    transform: scale(1.2);
    transition: 1s ease-in-out;
}
section.blog-image-wrapper {
    transition: 1s ease-in-out;
}

On 10/27/2023 at 4:24 AM, tuanphan said:

Use this CSS code for Writing blog page

/* blog hover */
.blog-alternating-side-by-side .blog-item.is-loaded:hover section.blog-image-wrapper {
    transform: scale(1.2);
    transition: 1s ease-in-out;
}
section.blog-image-wrapper {
    transition: 1s ease-in-out;
}

 

@tuanphan Thanks so much! I've adapted the code a little bit to this:

.blog-alternating-side-by-side .blog-item.is-loaded:hover img {
    transform: scale(1.03);
    transition: 0.3s ease-in-out;
}
img {
    transition: 0.3s ease-in-out;
}

I would also like the images to brighten a little bit at the same time. Is that possible?

Many thanks!

On 10/30/2023 at 6:56 PM, Aurora said:

@tuanphan Thanks so much! I've adapted the code a little bit to this:

.blog-alternating-side-by-side .blog-item.is-loaded:hover img {
    transform: scale(1.03);
    transition: 0.3s ease-in-out;
}
img {
    transition: 0.3s ease-in-out;
}

I would also like the images to brighten a little bit at the same time. Is that possible?

Many thanks!

Edit top code to this

.blog-alternating-side-by-side .blog-item.is-loaded:hover img {
    transform: scale(1.03);
    transition: .3s ease-in-out;
    filter: brightness(0.9);
}

2 hours ago, tuanphan said:

Edit top code to this

.blog-alternating-side-by-side .blog-item.is-loaded:hover img {
    transform: scale(1.03);
    transition: .3s ease-in-out;
    filter: brightness(0.9);
}

 

Thank you! Is it possible to have the .3s ease out in there as well? Otherwise it pops back quickly, which I don't like.

On 11/3/2023 at 1:35 PM, Aurora said:

Thank you! Is it possible to have the .3s ease out in there as well? Otherwise it pops back quickly, which I don't like.

change this line

  transition: .3s ease-in-out;

to

  transition: all .3s ease-in-out;

6 hours ago, tuanphan said:

change this line

  transition: .3s ease-in-out;

to

  transition: all .3s ease-in-out;

 

Thank you, but it's not working. It's still popping back too quickly.

On 11/6/2023 at 2:29 PM, Aurora said:

Thank you, but it's not working. It's still popping back too quickly.

try this

transition: all .95s ease-in-out !important;

8 minutes ago, tuanphan said:

try this

transition: all .95s ease-in-out !important;

 

It's not that 0.3s isn't long enough; it's that it's working when I hover over it, but when I remove the cursor, it pops back, so it's less than 0.3s.