Hover fade effect on JPEGS

Support
#1

Hi Guys,

I’m hoping you can help. Is there any CSS that I can enter to give a hover effect when the mouse is over images on a specific page (the homepage). I would ideally like a white opacity of around 40% on an image hover, a little bit like you have with some of the Essential Grid options when you mouse over the grid item, just with jpegs.

Can you offer any assistance?

Thanks a million, you guys are great!

#2

Hi There,

Please add a special class to each of the images.

Please provide the Popup credentials so we can see your website as well and we can provide you a custom code.

Thank you

#3

Hi,

Sorry, not sure what you mean by pop up credentials. Does the link to the WP-Admin page and the username and password in the Secure Note not work?

#4

Hi there,

There is an initial login popup before we can access the actual Wordpress login page. And we need the credentials for that too. Similar to this

Plus, I don’t see images on your home page. If you can provide the exact URL where the images are, then no need to log in :slight_smile:

Thanks!

#5

Hey, not sure what that is about at all, but thanks for checking it out.

You should be able to see it here: http://testing.johnrooneydesign.com/wp/home/

#6

Hi there,

Please add a class to the image elements. You can find the class field in the customize option of the image element:

Then add this code in the custom CSS (assuming that the class you added to the image elements is with-hover):

.with-hover:hover img {
    opacity: 0.5;
}

.with-hover img {
    transition: all 0.5s ease;
}

Hope this helps.

#7

Hi Guys,

Thank you for your help with this. Sorry, I think I might be missing something. So if I give the image elements a class of “img”, can I use the code exactly as you provided as it is? I gave all the images an ‘img’ class, and pasted the above code into the CSS customiser and it didn’t seem to do anything.

#8

Hi there,

If the class you have added to the images is img then you have to update the code to:

.img:hover img {
    opacity: 0.5;
}

.img img {
    transition: all 0.5s ease;
}

You can find more info about CSS classes here:

https://www.w3schools.com/cssref/sel_class.asp

Hope this helps.

#9

You are amazing! Thank you so so much!

#10

You’re always welcome!

Cheers.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.