Apply css to <img> inside <label> when <img> is pressed (mobile) - html

Question

Imagine I have the following:
<label style="height:50px;width:50px">
<img src="test.svg" width="30" height="30" style="cursor:pointer">
</label>
My objective is to make the <img> do a visual pop when it is pressed (on a mobile device). By pop, I mean a quick fade in and fade out (e.g. via applying lowered opacity, and then reverting it).
To achieve this, I added a class to the <label>. This class affects opacity when the label is focused, like so:
.pop:focus img{
opacity: 0.5;
}
<label class="pop" style="height:50px;width:50px">
<img src="https://www.clipartkey.com/mpngs/m/100-1009872_png-file-svg-laughing-emoji-black-and-white.png" width="30" height="30" style="cursor:pointer">
</label>
Needless to say, this does not work.
I need the simplest solution available that solves this problem. To be specific, I prefer pure CSS solutions (that too, using well-supported CSS properties as per caniuse.com). JS or esoteric CSS properties should not be needed for simple tasks like these, in my opinion. Unless of course, I am wrong and this task is not simple.

Answer 1

You can use a checkbox to trigger an animation like this:
HTML:
<label class="pop">
<input type="checkbox" class="trigger">
<img src="https://www.clipartkey.com/mpngs/m/100-1009872_png-file-svg-laughing-emoji-black-and-white.png" width="30" height="30" style="cursor:pointer">
</label>
CSS:
.pop {
display: inline-flex; //to center img
position: relative; //for the checkbox sizing
}
.pop > img {
margin: auto; //center image in the label
opacity: 1; //default opacity
}
.trigger {
position: absolute; //make checkbox the same size as the label
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0; //hide the checkbox so it isn't visible
}
.trigger:checked ~ img {
animation: pop 300ms; //add an animation property to the img sibling when the checkbox is clicked(checked)
}
// pop animation
#keyframes pop {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JS Fiddle

Answer 2

It is easy to do, if you have a little Javascript and a CSS animation. Maybe something like this:
document.getElementById("img").addEventListener("click", function() {
this.style.animation = "fade 1s linear 1";
setTimeout(function() {
document.getElementById("img").style.animation = "";
}, 1000)
});
#keyframes fade {
0% {
opacity: 1
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#img {
background-color: red;
border: 1px solid black;
width: 100px;
height: 100px;
}
<label id="label">
<div id = "img"></div>
</label>
Or, if you don't want Js, you could do something like this:
#img {
width: 100px;
height: 100px;
background-color: red;
transition: 1s;
}
#img:active {
opacity: 0;
}
<label id="label">
<div id = "img"></div>
</label>

Answer 3

If you move the text input to before the label, then you can trigger the animation on focusing the input, which happens when the label is clicked. It then possible to display the input after the label again by, for example, use flex with row-reverse.
<div class="pop-label-image">
<input type="text" id="example">
<label for="example">
<img src="https://via.placeholder.com/30">
</label>
</div>
.pop-label-image {
display: flex;
flex-direction: row-reverse;
align-items: baseline;
justify-content: start;
}
#keyframes pop {
0% {
opacity: 1
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
.pop-label-image input:focus + label {
animation: pop 500ms;
}