Vamos a ver como se crea un efecto Hover (Mouse por encima) con CSS3. Este se aplicará a los objetos que contengan una clase llamada "cambiar". Necesitaremos utilizar dos archivos, un ".html" y un ".css".

Creamos un archivo con el nombre index.html y escribimos el siguiente código HTML.

  <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="estilo.css" type="text/css" />
</head>
<body>
    <div class="cambiar">Cambia Color</div>
</body>
</html>

Verán que dentro de la etiqueta <body> hemos agregado una etiqueta <div> , al que asignamos una clase llamada "cambiar" y como complemento del código agregamos un texto, "cambiar color".

A continuación creamos un archivo "estilo.css" este archivo es llamado desde el html por la siguiente línea <link rel="stylesheet" href="estilo.css" type="text/css" /> , esta línea la encontras dentro de la sección "<head>".

Escriba el código que se muestra a continuación;

  div
{
  margin: 120px auto;
  width: 500px;
  height: 300px;
  background: #333D42;
  color: #fff;
  font-weight: 900;
  font-size: 3.4em;
  text-align: center;
  line-height: 300px;
  transition: all 0.3s ease;
}

En este código definimos propiedades para modificar el aspecto de la etiqueta <div> como tamaños, color de fondo, color de texto, y otras.

Ahora vamos a colocar el código para el efecto hover.

  .cambiar:hover
{
  background:#a5aba1;
  color:#494c46;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  box-shadow: inset 0 0 0 3px #555953;
}

Aquí modificamos algunas propiedades como por ejemplo, color de fondo, color del texto y se agregaron transformación y sobra.

Si no queres cambiar el tamaño del div (cuadrado), podes comentar las líneas que contienen la palabra "transform". Recuerda, para comentar una línea css debes utilizar /* ...código...*/

Ejemplo:

        /* transform: scale(0.8); */

Prueba este ejemplo.

Puedes ver el ejemplo completo Hover Effects CSS3 (Efectos Hover en CSS3). en mi perfil de codepen.

Suerte!!!

Twitter: @ramonigimenez


25,009 1 0