custom styling on before and after for hovering and tapping

I want to make a site with before and after pics. I want that you should see the before pic and when mouse hover, you see after. Also, on mobile I want the same effect when someone taps. The pics might not be the same dimensions also. Is there a way to do that? What code would I add to the images/stylesheets or any other file?

  • Adam Czajczyk
    • Support Gorilla

    Hello Jonathan,

    I hope you’re well today and thank you for your question!

    There are a few different way to achieve it. Here’s an example of a pure HTML/CSS solution

    HTML code

    <div class="myimage">
    </div>

    CSS rules

    .myimage {
    width:300px;
    height:200px;
    background-image: url("main_image.jpg");
    }

    .myimage:hover {
    background-image: url("on_hover_image.jpg");
    }

    Similar effect could be achieved also with some other CSS rules or with JS/jQuery scripts. There are also some plugins that bring nice image hover effects to wordpress. See here:

    https://pl.wordpress.org/plugins/amazing-hover-effects/

    http://tympanus.net/codrops/2010/11/16/hover-slide-effect/

    Having said that all, I’ll be happy to assist you further with this, however I’d need some more details (including an URL of a page in question) as there’s no an “universal way” of doing this and the solution needs to be selected according to the specific site.

    Best regards,

    Adam

  • Jonathan
    • The Crimson Coder

    I actually cant give a URL, the client does not want it on any forum. However, that does not make a difference, the CSS you gave me was exactly what I needed. It does just what I was trying to do. Thanks so much.

    Now, how would I get the same thing to happen, if a person was on a touch device and tapped instead of hovered?

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.