Texto diapositiva efecto enmascaramiento con transiciones CSS3
| Autor: | is8r |
|---|---|
| Views Total: | 5,105 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 9, 2014 |
| Licencia: | Unknown |
Vista prévia
Descripción
Una diapositiva de texto efecto de enmascaramiento en el mouse Hover, construido con transiciones CSS3 y creado por < a href = "https://codepen.io/is8r/pen/IdfDw" target = "_ blank" rel = "noopener" > is8r .
Funcionamiento
Añade un enlace con algún texto en tu página web.
<a href="#" data-hover="Slide Masking Effect"> Slide Masking Effect </a>
Estilos CSS para habilitar el efecto.
a {
position: relative;
overflow: hidden;
color: white;
text-decoration: none;
border-bottom: 2px solid white;
font-size: 30px;
font-weight: normal;
line-height: normal;
}
a:before {
-moz-transition: max-width 0.2s ease-out;
-o-transition: max-width 0.2s ease-out;
-webkit-transition: max-width 0.2s ease-out;
transition: max-width 0.2s ease-out;
content: attr(data-hover);
position: absolute;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
max-width: 0;
color: #111111;
}
a:hover:before {
max-width: 100%;
}
a:before {
border-bottom: 2px solid #111111;
}
