Diferentes efectos Hover Css

¿Que son los efectos Hover?

Los efectos hover son animaciones que podemos darle a contenedores, letras, imagenes, parrafos, etc en este tutorial te mostrare como aplicar estos efectos hover sencillos que podrian serte de utilidad para animar tus paginas web.

Para poder aplicar los estilos hovers lo que haremos es como siempre crearnos nuestro maquetado, en este caso empezare con un pequeño contenedor con el que trabajare.

<div class="container"></div>

 Teniendo listo nuestro maquetado a darle el efecto hover trabajaremos en el diseño del mismo, y es aqui donde le pondremos la animación deseada de la siguiente manera.

.container{
width:50px;
height:50px;
background:#DD4A68;
transition: all ease-in-out 0.5s;
}

Solo ten en cuenta el transition, yo agregue all ease-in-out 0.5s; para que la transicion del hover se efectue en 0.5 segundos tu puedes cambiarle a tu gusto, este efecto es de entrada y salida si lo quieres solo de entrada seria all ease-in 0.5s; ahora bien esto no es todo para el efecto hover ya que no hemos dicho que haga nada, ahora lo que haremos es lo siguiente (dependiendo lo que quieras):

Efecto Hover de quitar las esquinas:
Para quitar las esquinas utilizaremos el border radius para que al pasar el puntero sobre el objeto estas esquinas desaparescan.

.container{
width:50px;
height:50px;
background:#DD4A68;
transition: all ease-in-out 0.5s;
}
.container:hover{
border-radius:10px;
}

Efecto Hover amentar tamaño:

Este efecto lo que hace es aumentar el tamaño del contenedor de manera escalar, es decir 1.5 seria el tamaño original + 50% de su tamaño 2 seria el 200%.

 .container1{

width:100px;
height:100px;
background: orange;
margin: 3px;

transition: all ease-in-out 0.5s;
}
.container1:hover{
   transform: scale(1.2) ;
}

Efecto Hover Giro Vertical:

 Este efecto hover genera un giro en X al contenedor o etiqueta que se le este aplicando  con esto no confundir que es X quien girara de arriba  hacia abajo.

 .container2{
width:100px;
margin: 3px;

height:100px;
background:#DD4A68;
transition: all ease-in-out 1.0s;
}
.container2:hover{
    transform: rotateX(180deg)
}

Efecto Hover Giro Horizontal y cambio de color:

 Este es un efecto Hover combinado, un giro y un cambio de color (El Giro es Horizontal).

  .container3{

width:100px;
margin: 3px;

height:100px;
background: skyblue;
transition: all ease-in-out 0.5s;
}
.container3:hover{
  transform: rotateY(180deg);
  background: navajowhite;
  }

Efecto Hover Giro y conversion a circunferencia:

Este es practicamente el mismo efecto Hover del inicio solo que esta vez ya que nuestro contenedor es completamente cuadrado he decido convertirlo a circunferencia mediante el border radius aplicandolo a una escala del 50 por ciento.

  .container4{

width:100px;
margin: 3px;

height:100px;
background: aquamarine;
transition: all ease-in-out 0.5s;
}
.container4:hover{
    transform: rotate(80deg);
    border-radius: 50%;    
}

Efecto Hover pequeño movimiento:

Este es un efecto hover que tan solo genera un pequeño movimiento mas no un giro completo.

 .container5{
width:100px;
margin: 3px;

height:100px;
background: coral;
transition: all ease-in-out 0.5s;
}
.container5:hover{
   transform: rotate(-15deg);
}

Aca te dejo los ejemplos de efectos hover, si te gusto el post comparte :) sera de mucha ayuda