[SOLVED] How to create a press-effect on an image?

How to create a press-effect on an image?

In my hybrid mobile app, I have multiple icons and I would like to reproduce a press effect when clicking on an icon.

HTML:

 <div class="menuIcon" id="menuIcon">
       <img src="img/menu.svg" />
 </div>

CSS:

.menuIcon {
    width: 32px;
    height: 32px;
    position: absolute;
    left: 20px;
    top: 28px;
}

.menuIcon img {
    width: 19px;
    height: 19px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

The press effect that I want to reproduce is visible into twitter app.

Solution

You can solve that like this, using transform: scale and :active

.menuIcon {
    width: 32px;
    height: 32px;
    position: absolute;
    left: 20px;
    top: 28px;
}
.menuIcon img {
    width: 32px;
    height: 32px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.menuIcon img:active {
  transform: scale(0.8);
}

<div class="menuIcon" id="menuIcon">
       <img src="http://placehold.it/100" />
 </div>