Home Forums Art WordPress Theme Options for Mouseover Effects on Images

This topic contains 4 replies, has 2 voices, and was last updated by  PeterX12 1 month, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #14663

    PeterX12
    Participant

    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

    #14666

    BWSM
    Keymaster

    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.comTwitterFacebook

    #14669

    PeterX12
    Participant

    Hi,

    thanks a lot for your answer.

    I use the “zoom-in” mouseover effect.

    You can see it here :

    http://vynyze.com

    Best,

    Max

    #14670

    BWSM
    Keymaster

    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);
    }
    #14676

    PeterX12
    Participant

    Hey,

    thanks a lot for the CSS!

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

    Works perfect!

    Thanks again!

    Cheers,

    Max

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.