- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I’m using these css codes for panning an image towards right on hover
<i> .vertpan img { margin-left: 0px; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease; transition: margin 1s ease; }
.vertpan img:hover { margin-left: 200px; }
</i>
but I need to pan the image after only click that.
suggest ASAP..
Thanks in Advance
CSS doesn’t handle click events. You will need JS/jQuery. CSS has an :active
pseudo selector… but that only does something when the user actually has the mouse button down.
okay..
Then, can you help me with JS coding for that…??
This isn’t a coding service. Perhaps you could try it yourself and post back if you run into problems? Try making a Codepen.
If you don’t know were to start, check out developer.mozilla.org for a javascript reference. Start with methods like querySelector
and addEventListener
.
How much experience do you have with JS? do you understand the language?
Not sure if this is still an issue for you considering its been over three years but I found a bit of a loophole for using animations and active instead of resorting to jquery:
Context: I am making a coin flipper project where I use javascript and html/css. The functionality works perfectly well but I wanted my image of a coin to actually appear to flip. I used active and it only worked when I held the mouse down. But then, I changed the rotateX to 1440 deg (a lot of spinning) AND I changed the transition in the original element style to a shorter amount of time. Thus more spins were occurring faster in the period of time it took to click. I have the CSS if you follow the link just imagine the submit button as a picture of a quarter):
https://codepen.io/macro6461/pen/jGrJrg