Cardify

¿Qué es Cardify?

Cardify es un plugin de JQuery que ayudará a que tus imagénes adquieran más estilo, este plugin captura todas las imágenes a partir de un contenedor , las pone en una figure y además agrega una etiqueta figcaption donde muestra un efecto hover que enseña el texto del atributo alt

Archivos indispensables:

Para que cardify se ejecute correctamente es necesario descargar los siguientes archivos:

index.css

index.js

Descarga zip

Instalación:

Deberán incluirse los siguientes links:

En el head :

<link rel="stylesheet" href="css/index.css"></link>

Al final del body :

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script  src="js/index.js"></script>

¿Cómo usarlo?

container es el selector donde se buscarán todas las imágenes a ser procesadas ; en la variable config se define el tipo de efecto (filtro/filter) al hacer hover .

            var config = 'grayscale(50%)';
            $(container).cardify();

Resultados

Descubre que más puedes hacer con cardify

              var config = 'blur(5px)';
              $(container).cardify();

Start

                var config = 'contrast(30%)';
                $(container).cardify();

Start

Sistema de grillas

El componente de 12 grillas nos permite tener un diseño responsive.Las cuadriculas no son solo de imágenes, puede usarlas con cualquier tipo de elemento.

¿Cómo usarlas?

Empezamos con la clase .container , luego agregamos la clase .row para agregar una fila y despues podemos poner las clases ; .xs-1 , .xs-2 , .xs-3 , .xs-4 , .xs-5 , .xs-6 , .xs-7 , .xs-8 , .xs-9 , .xs-10 , .xs-11 ó .xs-12 para dispositivos mobile ; .sm-1 , .sm-2 , .sm-3 , .sm-4 , .sm-5 , .sm-6 , .sm-7 , .sm-8 , .sm-9 , .sm-10 , .sm-11 ó .sm-12 para tablets y .md-1 , .md-2 , .md-3 , .md-4 , .md-5 , .md-6 , .md-7 , .md-8 , .md-9 , .md-10 , .md-11 ó .md-12 para desktop; a continuación se muestran algunos ejemplos:

col-xs-1

col-xs-2

col-xs-3

col-xs-4

Encuentranos en Github:

Repositorio Github