Применить css к <img>внутри <label>при нажатии <img>(мобильный)

Question

Представьте, что у меня есть следующее:

<label style="height:50px;width:50px">
    <img src="test.svg" width="30" height="30" style="cursor:pointer">
</label>

Моя цель - заставить <img> визуально выталкивать при нажатии (на мобильном устройстве). Под «всплывающим» я подразумеваю быстрое появление и исчезновение (например, путем применения пониженного opacity, а затем его возврата).

Для этого я добавил класс к <label>. Этот класс влияет на opacity, когда метка находится в фокусе, например:

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

Само собой разумеется, это не работает.

Мне нужно самое простое решение, которое решает эту проблему. Чтобы указать c, я предпочитаю чистые решения CSS (которые тоже используют хорошо поддерживаемые свойства CSS согласно caniuse.com). На мой взгляд, свойства JS или esoteri c CSS для таких простых задач не нужны. Если конечно я ошибаюсь и задача эта не из простых.

Answer 1

Это легко сделать, если у вас есть небольшая Javascript и CSS анимация. Может быть примерно так:

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>

Или, если вы не хотите Js, вы можете сделать что-то вроде этого:

#img {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: 1s;
}

#img:active {
  opacity: 0;
}

<label id="label">
<div id = "img"></div>
</label>

Answer 2

Если вы переместите текстовый ввод перед меткой, вы можете запустить анимацию при фокусировке ввода, что происходит при щелчке по метке. Затем можно снова отобразить ввод после метки, например, используя flex с 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;
}

Answer 3

Вы можете использовать флажок для запуска такой анимации:

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 Скрипка