Support ForumChange opacity of Image on mouseover – Support Forum

Change opacity of Image on mouseover

jayawesome — Fri, 17 Apr 2015 19:21:29 +0000

Hi, great design as always! One question. That’s not even a problem with your design, I’m just wondering if I can do the following: using “Inline CSS styles” on image settings I want to put there css class which will light up the image (only on mouseover) by adding transparency to it. Is this even possible just using Visual website editor? If it is not that easy, then don’t bother yourself ;) Thank you.

Reply To: Change opacity of Image on mouseover

IshYoBoy — Mon, 20 Apr 2015 07:05:39 +0000

Hi,

Muchas gracias Señor!

The “Inline CSS styles” field is meant for direct inline CSS properties. Mouse over effect however cannot be controlled from there.

What you can do is navigate to “Appearance -> Theme Options -> General Options -> Custom CSS” and add the following code:

.ish-sc_image a:hover img{
	opacity: 0.7;
}

.ish-sc_image a:hover img{

opacity: 0.7;

}

This will change the opacity of each image which has links to somewhere. If you want to change it to simple images without links then use the following:

.ish-sc_image img:hover {
	opacity: 0.7;
}

.ish-sc_image img:hover {

opacity: 0.7;

}

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Change opacity of Image on mouseover

jayawesome — Mon, 20 Apr 2015 10:48:29 +0000

Thank you, it works just perfectly!. Really easy to get it done. You’re awesome.

Reply To: Change opacity of Image on mouseover

IshYoBoy — Mon, 20 Apr 2015 15:30:15 +0000

Hey,

Very glad to hear that! And thank you very much for the kind words! It really keeps us motivated.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market