CSS3 transition effect with onclick

Question

I am working my way through CSS3 and kinda stuck at one problem.

The issue is as follows :

I have an image that is initially position at left-side of the screen :

.box img{
margin-left:0;
-webkit-transition:1s;
 }

Now, on hover, when I want the effect to take place , ie. move the image 500px from left when I hover over the image, the code follows is :

.box img:hover{
margin-left:500px;
-webkit-transition:1s;
 }

This works just perfect. The only issue is when I want the same effect to take when I click on the image. That is I want the image to move 500px from left upon click and stays there. Again when I click on the image, it should move back to it's original position.

How should I go about it, please explain me!!!!

Answer 1

You can use almost the same approach, just use JS/jQuery to add/remove a class which has all the rules like the hover state.

CSS

.box img:hover, .box img.clicked{
    margin-left:500px;
    -webkit-transition:1s; // you don't need to specify this again
 }

jQuery

$('.box img').on('click', function() {
    $(this).toggleClass('clicked');
});

UPDATE

Here is an example: http://jsfiddle.net/Te9T5/ Hover state is removed because it doesn't look good when you have both the hover and the click doing the same thing because you need to hover something in order to click it.

Answer 2

With JavaScript, maybe you could do something like this? Basically what I'm doing in my example is changing the margin-left property when the image is clicked, and based on its position it will add margin-left: 500px; or margin-left: 0;

Notice that I've added an id to the img-tag, this is to be able to use document.getElementById to access/change the margin-left property for the image.

Here's a demo

HTML

<div class="box">
    <img id="move" src="http://placekitten.com/200/300" alt="Pic" />
</div>

CSS (Added unprefixed transitions)

.box img {
    margin-left:0;
    -webkit-transition: 1s;
            transition: 1s;
}

JS

(function () {
    var move = document.getElementById('move');

    move.onclick = function () {

        if (move.style.marginLeft === "500px") {
            move.style.marginLeft = "0";

        } else {
            move.style.marginLeft = "500px";
        }
    };
})();

Answer 3

If you just want to keep going with css pseudo classes, then you could wrap your img tag in an a tag that points nowhere, giving you the full anchor pseudo class stack

For something like this:

<div class="box"><a href="#" class="img_wrapper"><img src=https://www.google.com/images/srpr/logo11w.png /></a></box>

You can then accessed the click with css via the :active psuedo class:

.box .img_wrapper img {..}
.box .img_wrapper:hover img {..}
.box .img_wrapper:active img {..}

Full reference here: http://www.w3schools.com/css/css_pseudo_classes.asp