Animation Framework on a grid images gallery

Fer B 0
Viewed 25

Blockquote

Hi people, i have an image gallery with grid and i want to put an Animista animation when user click on image , i tried to use hover on the class but there is an specificity error.

Blockquote

css:

img :hover{

.scale-up-center  {
    -webkit-animation: scale-up-center 0.7s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
    animation: scale-up-center 0.7s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
} 



@-webkit-keyframes scale-up-center {
0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}
100% {
    -webkit-transform: scale(1);
            transform: scale(1);
}
}
@keyframes scale-up-center {
0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
}
100% {
    -webkit-transform: scale(3);
            transform: scale(3);
}
}

}

html :

    <div class="grid">div class="modulo">
            <div class="producto" data-name="p-9">
                <img class="scale-up-center"src="Img/Pastel.jpg" alt="Pastel">
                <h3>Pastel</h3>
                <div class="info">Las medidas son : alto:47 cm, ancho : 54 cm</div>
            </div>
        </div>
hover grid css-animations css html
1 Answers

:hover selector is activated by moving mouse over an element. You need to use focus. To do that tabindex also needs to be set. Here is a demo:

.producto {
    overflow: hidden
}

.producto img:focus  {
    animation: scale-up-center 0.7s cubic-bezier(0.550, 0.055, 0.675, 0.190) backwards;
}

.producto img:active  {
    animation: none;
}

@keyframes scale-up-center {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(3);
    }
}
<div class="grid">
  <div class="modulo">
    <div class="producto" data-name="p-9">
      <img tabindex="0" src="https://placekitten.com/100/100" alt="Pastel">
      <h3>Pastel</h3>
      <div class="info">Las medidas son : alto:47 cm, ancho : 54 cm</div>
    </div>
  </div>
</div>

BehRouz0
Related