Ver Demo


local_library

Utilidad

Cardify es un plugin implementado con jquery que tiene como finalidad darle un efecto hover a las imagenes y que mostrar el texto del atributo alt de la imagen.

settings

Escalabilidad

Al ser un código muy útil posee escalabilidad, ya que lo puede editar el usuario de acuerdo a sus necesidades


Implementación build
  1. Descargar los siguientes archivos y añadirlos a tu proyecto: move_to_inbox
  2. Vincular el css, js y jQuery en el html.
    3. <link rel="stylesheet" href="test.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="path-to-cardify.js"></script>
  3. Elaborar la siguiente estructura en el html.
    4. <div class="container">
    <img src="../assets/images/perro1.jpg" alt="Cachorro1">
    <img src="../assets/images/perro2.jpg" alt="Cachorro2">
    <img src="../assets/images/perro3.jpg" alt="Cachorro3">
    <img src="../assets/images/perro4.jpg" alt="Cachorro4">
    <img src="../assets/images/perro5.jpg" alt="Cachorro5">
    <img src="../assets/images/perro6.jpg" alt="Cachorro6">
    <img src="../assets/images/perro7.jpg" alt="Cachorro7">
    <img src="../assets/images/perro8.jpg" alt="Cachorro8">
    </div>
  4. En el contenedor de las imágenes colocar una clase llamada container
  5. Todas las imágenes deben de tener su atributo alt
  6. Llamar al plugin en su archivo js
    7. $('.container').cardify({});
  7. Ademas podran modificar el texto con las siguientes propiedades
    8. $('.container').cardify({color:'ingrese un color', fontFamily:'ingrese un tipo de letra'});