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!!!!

Looking for a pure CSS solution? This may help: http://stackoverflow.com/questions/21919044/css-rotation-by-45-degrees-on-click/21919261#21919261 — Hashem Qolami, Feb 24 '14 at 10:05

Shomz · Accepted Answer · 2013-11-19T13:04:16.683

19

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.

edited Nov 19 '13 at 13:04

answered Nov 19 '13 at 03:21

Shomz

37,421
4
57
85

It doesn't seem to be working. Can you elaborate with an example? – Abhishek Nov 19 '13 at 03:55
Sure, have a look here: http://jsfiddle.net/Te9T5/. I've removed the hover animation since it causes a glitch because you actually need to hover before you click. Basically, I'm just toggling a class and letting the CSS do the animation just like you were doing for the hover state. – Shomz Nov 19 '13 at 12:58
Hey Shomz, things seem to be working fine however I'm not able to run the script-code. It works just fine in the *jsfiddle* but not in my code. I put the javascript-code inside tag and within the – Abhishek Nov 20 '13 at 03:02

score 4 · Answer 2 · answered Nov 19 '13 at 07:16

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";
        }
    };
})();

score 2 · Answer 3 · answered Nov 19 '13 at 03:16

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

score 0 · Answer 4 · answered Nov 25 '13 at 05:59

0

Turns out css has a :target Pseudo-selector which can be used check this out http://tangledindesign.com/how-to-trigger-css3-transitions-on-click-using-target/

answered Nov 25 '13 at 05:59

sahil lamba

89
1
1
9

CSS3 transition effect with onclick

4 Answers4