-2

I have an image that increases your score every time you click it. I want to make it more interesting so that the image slightly shrinks when you click it, and enlarges to normal size again when you let go of the click. How would I do this animation/effect. (With CSS)

Harshul
  • 1
  • 2
    Possible duplicate of [Can I have an onclick effect in CSS?](https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css) – Siguza Nov 10 '17 at 17:36
  • On SO, you are expected to try to **write the code yourself**. After **[doing more research](//meta.stackoverflow.com/questions/261592)** if you have a problem you can **post what you've tried** with a **clear explanation of what isn't working** and providing a **[Minimal, Complete, and Verifiable example](//stackoverflow.com/help/mcve)**. SO is not a code writing service. – Rob Nov 10 '17 at 17:42

2 Answers2

0

CSS3 transitions is the best way: in this example is a div, try with img.

Multiple declarations are used to ensure compatibility with all browsers.





 div {
  width: 100px;
  height: 100px;
  background: green;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

div:active {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}


 <div>
 </div>
Nick
  • 422
  • 2
  • 9
0
parentDiv:hover > img{
  padding: 15px;
}
Andre Ramadhan
  • 427
  • 2
  • 14