Efectos de la página https://www.cssscript.com

/-- Efecto: Bottom-to-Top / De abajo hacia arriba --/

Nota

Lorem ipsum

/-- HTML del efecto: top-to-bottom / De arriba hacia abajo --/

Nota

Lorem ipsum

/-- Efecto: left-to-right / De d izquierda a derecha --/

Nota

Lorem ipsum

/-- Efecto: right-to-left / De derecha a izquierda --/

Nota

Lorem ipsum

/-- Efecto: rotate-in / Rotar en --/

Nota

Lorem ipsum

/-- Efecto: rotate-out / Rotar --/

Nota

Lorem ipsum

/-- Efecto: open-up / Abrir --/

Nota

Lorem ipsum

/-- Efecto: open-dowm / Abrir hacia abajo --/

Nota

Lorem ipsum

/-- Efecto: open-left / ABIERTO a la izquierda --/

Nota

Lorem ipsum

/-- Efecto: open-right / ABIERTO a la derecha --/

Nota

Lorem ipsum

/-- Efecto: come-left / ven a la izquierda --/

Nota

Lorem ipsum

/-- Efecto: come-right / ven a la derecha --/

Nota

Lorem ipsum

href='https://www.cssscript.com/demo/animated-image-grid-with-css3-based-hover-caption-effects-incontent/css/sass-compiled.css' /-- HTML del efecto: Bottom-to -Top / De abajo hacia arriba --/ <div class="pic"> <img src="https://www.bing.com/th?id=ABT1613545AC079060809E0C3773EDE973B4B8DD1EECD4A11DBE9BCE6D547C80A48&w=608&h=200&c=2&rs=1&o=6&dpr=1.1&pid=SANGAM" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Nota</h1> <p> Lorem ipsum</p> </span> </div> <style> .pic{max-width:300px;max-height:200px;position:relative;overflow:hidden;margin:10px;display:inline-block;animation:anima 2s;-webkit-animation:anima 2s;-moz-animation:anima 2s;backface-visibility:hidden;-webkit-backface-visibility:hidden; color:white; }.pic-3d{-webkit-perspective:500;-webkit-transform-style:preserve-3d}.pic-caption{cursor:default;position:absolute;width:100%;height:100%;background:rgba(44,62,80,0.92);padding:10px;text-align:center;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}.pic-image{-webkit-transform:scale(1.1);transform:scale(1.1)}.pic:hover .pic-image{-webkit-transform:scale(1);transform:scale(1)}.pic-title{font-size:1.8em}a,a:hover,.pic .pic-image,.pic-caption,.pic:hover .pic-caption,.pic:hover img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease}.pic:hover .bottom-to-top,.pic:hover .top-to-bottom,.pic:hover .left-to-right,.pic:hover .right-to-left,.pic:hover .rotate-in,.pic:hover .rotate-out,.pic:hover .open-up,.pic:hover .open-down,.pic:hover .open-left,.pic:hover .open-right,.pic:hover .come-left,.pic:hover .come-right{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1}.bottom-to-top{top:50%;left:0}.pic:hover .bottom-to-top{top:0;left:0}.top-to-bottom{bottom:50%;left:0}.pic:hover .top-to-bottom{left:0;bottom:0}.left-to-right{top:0;right:50%}.pic:hover .left-to-right{right:0;top:0}.right-to-left{top:0;left:50%}.pic:hover .right-to-left{left:0;top:0}.rotate-in{transform:rotate(90deg) scale(0.1);-webkit-transform:rotate(90deg) scale(0.1);top:0;left:0}.pic:hover .rotate-in{transform:rotate(360deg) scale(1);-webkit-transform:rotate(360deg) scale(1)}.rotate-out{transform:rotate(90deg) scale(3);-webkit-transform:rotate(90deg) scale(3);top:0;left:0}.pic:hover .rotate-out{transform:rotate(360deg) scale(1);-webkit-transform:rotate(360deg) scale(1)}.open-down{transform:rotateX(-180deg);-webkit-transform:rotateX(-180deg);top:0;left:0}.pic:hover .open-down{transform:rotateX(0);-webkit-transform:rotateX(0)}.open-up{transform:rotateX(180deg);-webkit-transform:rotateX(180deg);top:0;left:0}.pic:hover .open-up{transform:rotateX(0);-webkit-transform:rotateX(0)}.open-left{transform:rotateY(180deg);-webkit-transform:rotateY(180deg);left:0;top:0}.pic:hover .open-left{transform:rotateY(0deg);-webkit-transform:rotateY(0deg)}.open-right{transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);left:0;top:0}.pic:hover .open-right{transform:rotateY(0deg);-webkit-transform:rotateY(0deg)}.come-left{transform:rotateY(90deg) rotateX(90deg);-webkit-transform:rotateY(90deg) rotateX(90deg);left:0;top:0}.pic:hover .come-left{transform:rotateY(0) rotateX(0);-webkit-transform:rotateY(0) rotateX(0)}.come-right{transform:rotateY(-90deg) rotateX(-90deg);-webkit-transform:rotateY(-90deg) rotateX(-90deg);left:0;top:0}.pic:hover .come-right{transform:rotateY(0) rotateX(0);-webkit-transform:rotateY(0) rotateX(0)}@media screen and (max-width: 560px){.pic{max-width:400px;max-height:300px;display:block;animation:none;margin:10px auto}} </style> </style>

Este efecto fue extraído de la siguiente URL: https://www.cssscript.com