Question

175

CSS3 transition effect with onclick

rated 0 times [ 177] [ 2] / answers: 1 / hits: 102559 / 11 Years ago, tue, november 19, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

byrondonavanc

Add To Favorites

Follow

Total Points: 675

Total Questions: 107

Total Answers: 105

Location: Peru

Member since Fri, Oct 14, 2022

2 Years ago

byrondonavanc questions

1 Mongoose, getting TypeError: Cannot read properties of undefined (reading 'find')

Tue, Dec 28, 21, 00:00, 2 Years ago

1 Properly handle multiple files input with Formik and React

Tue, Apr 6, 21, 00:00, 3 Years ago

1 Puppeteer pdf page break bug

Thu, Mar 25, 21, 00:00, 3 Years ago

1 React useEffect() : Most efficient way to compare if two arrays of objects are equal

Fri, Dec 4, 20, 00:00, 4 Years ago

1 How to close dropdown on outside click NEXT.JS

Sat, Jul 25, 20, 00:00, 4 Years ago

View All

answered 11 Years ago sageallenv · Accepted Answer

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.