Cuadrícula de imagen animada con efectos de subtítulos flotantes basados en CSS3-InContent
| Autor: | brunodsgn |
|---|---|
| Views Total: | 12,085 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 27, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
InContent es un diseño de cuadrícula CSS puro construido con LESS/SASS para crear una galería de cuadrícula de imágenes animadas & animada que viene con muchos efectos de subtítulos de imagen basados en CSS3 como rotar, voltear, deslizar, etc. Actualmente funciona perfectamente en los navegadores modernos que soporta la transición CSS3 y las propiedades de transformación.
Funcionamiento
Incluya el archivo CSS requerido en la sección head del documento HTML.
<link rel="stylesheet" href="css/sass-compiled.css" />
Incluye Modrnizr lib para el soporte de navegadores antiguos.
<script src="libs/modernizr.js" type="text/javascript"></script>
Cree el código HTML para una galería de imágenes. Agregue la clase CSS al elemento de título de imagen para especificar el efecto Hover.
<!--Effect: Bottom to Top --> <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Bottom to Top</h1> <p>Hi, this is a simple example =D</p> </span> </div>
Eso es todo. Libre para editar el archivo CSS para crear sus propios estilos & efectos flotantes.
