Options for Mouseover Effects on Images

[PeterX12]

Hi,

I have a question regarding mouseover effects:

I would like to change the mouseover effect for images – I’d like to have the option to do the following two things:

1.) Adding a mouseover effect where the image changes the opacity on mouseover (the opacity could change to 0.5) + removing the zoom-in mouseover effect that is currently installed on the theme.

2.) Changing the percentage of the zoom-in effect on mouseover that is currently installed on the theme: For example making the the zoom-in effect smaller by 50%.

I would be very thankful if you could let me know how I could make these two changes.

Best,

Max

[SeaTheme]

Hi,

What’s options (like: mouseover effect) you use? Could you paste your page url? I will try to give you some css to fit the 2 things.

Regards!
Bwsm – uiueux.com – Twitter – Facebook

[PeterX12]

Hi,

thanks a lot for your answer.

I use the “zoom-in” mouseover effect.

You can see it here :

http://vynyze.com

Best,

Max

[SeaTheme]

Hi,

You can add the custom css(“Appearance > Customize : Additional CSS”):
I am not clear that you want to remove or change the zoom-in effect, so I paste the 2 codes.

1. for image opacity: 0.5
.mouse-over .ux-hover-wrap:hover .single-image-img { opacity: 0.5;}

removing the zoom-in mouseover effect

.mouse-over .ux-hover-wrap:hover {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

2. making the the zoom-in effect smaller by 50%

.mouse-over .ux-hover-wrap:hover {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}

[PeterX12]

Hey,

thanks a lot for the CSS!

Yes, that’s exactly what I was looking for!

Works perfect!

Thanks again!

Cheers,

Max

[Author]

Posts