apply effect to an image with css?

Question

apply effect to an image with css?

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I have the following link with an icon on the left side. I want to add the effect that when you click on the link, only the image vibrates with the vibrate class. Just as I have it, only the effect is applied when I click on the image.

.vibrar:active{
  -webkit-animation: tiembla 0.2s 1;
  -moz-animation: tiembla 0.2s 1;
  -o-animation: tiembla 0.2s 1;
 -ms-animation: tiembla 0.2s 1;
}
@-webkit-keyframes tiembla{
  0%  { -webkit-transform:rotateZ(-5deg); }
  50% { -webkit-transform:rotateZ( 0deg) scale(1.4); }
  100%{ -webkit-transform:rotateZ( 5deg); }

}

<li><a class="opcionmenu" id="verclientes" data-toggle="modal" data-target="#modalverclientes"> <img class="vibrar" src="~/Content/img/Ojo.png" /> Ver Clientes</a></li>

html css3 css

asked by Alcides Salazar 10.12.2016 в 18:16

source

2 answers

0

The solution is to replace 'active' with the pseudo class ': hover' and apply the class 'vibrate' to the link (the element <a> ). This will vibrate everything (image and link). In case that when passing over the link, the image vibrates, you have to modify much more.

answered by 24.12.2016 в 04:18

save mp3 formats in BD and play them is a Streaming Do you not upload the data from my database to my jsp?

score 2 · Accepted Answer

The error is in the definition of the class. You are indicating that the animation is performed on the element with class .vibrar this :active . That is, when the img tag is active.

Solution:

Assign class .vibrar to tag a and indicate that the animation is done when this element is :active , the element with class is animated, for example .icono .

.icono {
  height: 15px;
}
.vibrar:active .icono {
  -webkit-animation: tiembla 0.2s 1;
  -moz-animation: tiembla 0.2s 1;
  -o-animation: tiembla 0.2s 1;
 -ms-animation: tiembla 0.2s 1;
}
@-webkit-keyframes tiembla {
  0%  { -webkit-transform:rotateZ(-5deg); }
  50% { -webkit-transform:rotateZ( 0deg) scale(1.4); }
  100%{ -webkit-transform:rotateZ( 5deg);
}

<li>
  <a class="opcionmenu vibrar" id="verclientes" data-toggle="modal" data-target="#modalverclientes">
    <img class="icono" src="http://us.cdn3.123rf.com/168nwm/darrenwhi/darrenwhi0803/darrenwhi080300023/2694785-ilustracion-de-dibujos-animados-en-blanco-y-negro-ojos.jpg" />
    Ver Clientes
  </a>
</li>