Hover over image effects. Please help!

Hi.  I would like to be apply the effect of hovering over images and having them respond to the cursor with a change of opacity and pan/zoom (that are also linked).  This is an example website that has images with this effect.

@cmiller Hi! Can you share your site URL? Also, please let me know which images on your site you would like to apply the hover effect to.

https://www.expandingeducation.com/.  Password EETest2024

I would like to apply this to many images across many pages

@cmiller Add this code under Website > Pages > Website Tools > Custom CSS

.image-block img {
    transition: all 1.2s ease;
}
.image-block:hover img {
    transform: scale(1.1);
    opacity: 0.7;
    transition: all 1.2s ease;
}

Thank you!  That is accomplishing what I want.  Is there a way to make exceptions so that certain photos don't respond to the cursor with the effect?

5 minutes ago, cmiller said:

Thank you!  That is accomplishing what I want.  Is there a way to make exceptions so that certain photos don't respond to the cursor with the effect?

Yes, we can do that. That's why I initially asked if there's any specific image you would like to apply the hover effect to.

I really appreciate that!  Currently, the photos that I would like to apply the effect to are as follows, by webpage:

1.  Landing:  None

2.  Home:  'Our Values' image

3.  Partner with Us:  Partnership Services carousel images - the ones with the trees and light blue backgrounds.

4.  Legal Hub (hidden from nav):  All three images

5.  Our Roots (hidden from nav):  None

6.  Resources (hidden from nav):  'Watch This Space' image

7.  Books:  All images

Password:  EETest2024

Thanks @Lesum @tuanphan This is exactly the question searching. Super helpful. I have two futher questions. I only want the hover treatment on my desktop and not on the mobile version of the site. Because hovering doesn't happen on phones.

Second question. Is these a way to make the hover code specific to a page section and not the entire page? Thanks, again.

@MTO

#1. Change Code Block code to this

<style>
  @media screen and (min-width:768px) {
  .image-block img {
    transition: all 1.2s ease;
}
.image-block:hover img {
    transform: scale(1.1);
    opacity: 0.7;
    transition: all 1.2s ease;
    }}
</style>

#2. First, you need to find Section ID (data-section-id), next use this code

<style>
  @media screen and (min-width:768px) {
  #enter-data-section-id-here .image-block img {
    transition: all 1.2s ease;
}
#enter-data-section-id-here .image-block:hover img {
    transform: scale(1.1);
    opacity: 0.7;
    transition: all 1.2s ease;
    }}
</style>

You can follow this to find Section ID.