TODO HOVER: Efectos de la Librería de http://imagehover.io/ Parte 1

Se anexa únicamente el HTML del efecto 1, porque para aplicar los diferentes efectos restantes, simplemente hay que modificar la denominación imghvr. La fuente de estos efectos es http://imagehover.io/

example-image — Hola Mundo

Mensaje breve: Lorem ipsum dolor sit amet!

Efecto:imghvr-hinge-down / bisagra hacia abajo

Hola Mundo

Mensaje breve: Lorem ipsum dolor sit amet!

Efecto:imghvr-slide-right / Desliza hacia la derecha

    Efecto:imghvr-reveal-up / Revelar

Efecto:imghvr-fade / desteñir

Efecto:imghvr-push-up / hacer subir

Efecto:imghvr-push-down / empujar hacia abajo

Efecto:imghvr-push-left / empujar hacia la izquierda

Efecto:imghvr-push-right /empujar hacia la derecha

Efecto:imghvr-slide-down / bajar deslizándose

Efecto:imghvr-slide-left / deslizar hacia la izquierda

Efecto:imghvr-reveal-down / revelar abajo

Efecto:imghvr-reveal-left / revelar izquierda

Efecto:imghvr-reveal-right / revelar derecha

Efecto:imghvr-hinge-down / bisagra abajo

Efecto:imghvr-hinge-right /bisagra hacia la derecha

Efecto:imghvr-slide-down / bisagra hacia la izquierda

Efecto:imghvr-flip-horizontal /dar la vuelta horizontal

Efecto:imghvr-flip-vert / voltear vertical

Efecto:imghvr-flip-diag-1 / voltear diagonal

Efecto:imghvr-flip-diag-2 / voltear diagonal

Efecto:imghvr-shutter-out-horiz / obturador horizontal

Efecto:imghvr-shutter-out-vert /obturador vertical

Efecto:imghvr-shutter-out-diag-1 / obturador diagonal 1

Efecto:imghvr-shutter-out-diag-2 / obturador diagonal 2

Efecto:imghvr-shutter-in-horiz / obturador en horizontal

Efecto:imghvr-shutter-in-vert / obturador en vertical

Efecto:imghvr-shutter-in-out-horiz / obturador en horizontal

Efecto:imghvr-shutter-in-out-vert / obturador en vertical

Efecto:imghvr-shutter-in-out-diag-1 /obturador en diagonal 1

Efecto:imghvr-shutter-in-out-diag-2 / obturador en diagonal 2

Efecto:imghvr-fold-up / doblar, plegar

Efecto:imghvr-fold-down / plegar

Efecto:imghvr-fold-left / doblar a la izquierda

Efecto:imghvr-fold-right / doblar a la derecha

Efecto:imghvr-zoom-in / acercarse

Efecto:imghvr-zoom-out / disminuir el zoom

Efecto:imghvr-zoom-out-up / alejarte

Efecto:imghvr-zoom-out-down / alejar hacia abajo

Efecto:imghvr-zoom-out-left / alejar hacia la izquierda

Efecto:imghvr-zoom-out-right / alejar hacia la derecha

Efecto:imghvr-zoom-out-flip-horiz / alejar voltear horizontalmente

Efecto:imghvr-zoom-out-flip-vert / alejar voltear verticalmente

Efecto:imghvr-blur / difuminar


    
    
<link href="https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/2.0.0/css/imagehover.min.css" type="text/css" rel="stylesheet" />


<div class="figure-results__cell" >
    <figure class="imghvr-hinge-down"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image"/>
      <figcaption>
         <h3>Hola Mundo</h3>
        <p>Mensaje breve: Lorem ipsum dolor sit amet!
       </p>
      </figcaption><a href="javascript:;"></a>
    </figure>
 <textarea onclick="this.focus();this.select()"style="margin-bottom:110px;margin-right:40px;float:center;display:inline;background:#ffffdf;font-size:15px;font-weight:600;"readonly="readonly" rows="3"  cols="55" >Efecto:imghvr-hinge-down / bisagra hacia abajo

sábado, 4 de junio de 2022

Efectos de la Librería de http://imagehover.io/ Parte 1

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo

Hola Mundo