→→ Please check out our new WP Theme: Navian - Responsive Multi-Purpose WordPress Theme ←←
In case you can't login to submit a ticket, please hard refresh the browser and try to login again.
If the problem persists, please send us a message via THEMELOGI profile page so we can help you out.
To update the theme or plugins, please have a look at Theme & Plugin Updates and Bundled Plugin License.
Also, if you couldn't import demo content or you got the message "Failed to import", please see our FAQs page. Thank you :)

Tickets Tickets Wanium Mouse Hover effect

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #9921

    Hello, Danny,

    I would like to put an effect over an image and don’t know exactly how to do this with CSS.
    Something like this should happen:
    with a single image the image should turn slightly grey or almost white when hovering the mouse over it. So a kind of overlay effect without seeing the image title.
    It would be great if you could use this on an image in conjunction with the Viusual Composer.

    I hope you know what I mean and can send me something.
    Thanks a lot!

    Translated with http://www.DeepL.com/Translator (free version)

    #9928
    Danny
    Supporter

    Hi there,

    Thanks for writing in!

    About this issue, please share us your site URL and the admin account of your site via private reply so we can investigate your case and help you out. Also, please point to specific page where we can see it. Any screenshots would be welcomed! (you could upload your images into https://imgbb.com/ and share the link here).

    Best regards,
    Danny

    #9943
    This reply has been marked as private.
    #9944
    Danny
    Supporter

    Hi there,

    Thanks for your info!

    I’ve added a little CSS into your Dashboard > Appearances > Customize > Zusätzliches CSS.

    To add grayscale effect on hover image, please add a CSS class named “grayscale” in Single Image, or in column CSS class name option, as in the screenshot below:

    Hope this helps,
    Danny

    #9946

    Hi Danny,

    This was not quite what I was looking for – but you have laid the perfect foundation stone!! sometimes I forget how simple WordPress can be… I changed the code a bit and got exactly what I was looking for!

    Thanks a lot for your help!

    Here is my code – in case someone has something similar in mind:

    .grayscale img:hover {
    opacity:0.7;
    -webkit-transition: scale(0,5);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -webkit-backface-visibility: hidden;
    }
    figure {
    display: inline-block;
    background: white;
    border: 1px solid black;
    overflow: hidden;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    }
    figure img {
    display: block;
    margin: 0;
    padding: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    }
    figure:hover {
    background: whitesmoke;
    border: 1px solid grey;
    }
    figure:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    opacity: .5;
    filter: alpha(opacity=50);
    }

    #9947

    Okay… it looks like something’s wrong…
    Because the code is now being applied to the entire site.
    not only where I put greyscale as a CSS change… you might see where my mistake is?

    #9954
    Danny
    Supporter

    Hi there,

    Thanks for your info!

    I think you may need to add a custom class .grayscale before the figure in your code. It should be something like this:

    .grayscale img:hover {
    opacity:0.7;
    -webkit-transition: scale(0,5);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    -webkit-backface-visibility: hidden;
    }
    .grayscale figure {
    display: inline-block;
    background: white;
    border: 1px solid black;
    overflow: hidden;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    }
    .grayscale figure img {
    display: block;
    margin: 0;
    padding: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    }
    .grayscale figure:hover {
    background: whitesmoke;
    border: 1px solid grey;
    }
    .grayscale figure:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    opacity: .5;
    filter: alpha(opacity=50);
    }

    Then your image effect only apply for the image with CSS class “grayscale”.

    Hope this helps,
    Danny

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.