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: stackoverflow.com/questions/21919044/… — Hashem Qolami
– Hashem Qolami, Commented Feb 24, 2014 at 10:05

Shomz · Accepted Answer · 2013-11-19 13:04:16Z

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, 2013 at 13:04

answered Nov 19, 2013 at 3:21

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abhishek Over a year ago

It doesn't seem to be working. Can you elaborate with an example?

Shomz Over a year ago

Sure, have a look here: 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.

Abhishek Over a year ago

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 <head> tag and within the <script type="text.javascript"> tags, but it doesn't seem to be executing the script-code.

Christofer Vilander · Accepted Answer · 2013-11-19 07:16:51Z

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

Alan L. · Accepted Answer · 2013-11-19 03:16:52Z

2

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

answered Nov 19, 2013 at 3:16

Alan L.

3803 silver badges6 bronze badges

Comments

sahil lamba · Accepted Answer · 2013-11-25 05:59:40Z

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, 2013 at 5:59

sahil lamba

711 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

CSS3 transition effect with onclick

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related