Indice temático

CAMBIAR ENTRE DOS IMÁGENES AL PASAR EL RATÓN POR ENCIMA CON CSS3

Lo que vas a aprender

CÖMO CAMBIAR ENTRE DOS IMÁGENES AL PASAR EL RATÓN POR ENCIMA CON CSS3

https://todohover.blogspot.com/

Seguro que has visto este efecto en muchas ocasiones y la verdad es que es muy sencillo y además hay varias formas de hacerlo, la más habitual o al menos la más sencilla en cuanto al código que hay que usar es poner la imagen como fondo de algún elemento, por ejemplo un div, y poner la otra imagen de fondo cuando se pase el ratón por encima.

Con crear un div con el id por ejemplo imagen-cambiante y el siguiente CSS ya esta listo.

Efecto hover en una imagen que muestra texto oculto

Si quieres saber cómo se hace el efecto hover en una imagen que al pasar el cursor aparezca texto, entonces, esta publicación es para tí. Sigue leyendo y aprenderás de manera rápida y fácil, pues la redacción está pensada para todo usuario, especialmente, principiantes.

Imagen que aparece con efecto deslizante

Mostrar datos adicionales con algo de estilo y hover

Eso del estilo va porque vamos a jugar un poco con las propiedades CSS, no porque las sugerencias que planteo como ejemplos sean una virguería estética.

Se trata de algo tan sencillo y vistoso a la vez, como hacer aparecer información adicional sobre una imagen al pasar el puntero por encima de ella, y que redundará en un "despegue" para tus publicaciones. Para esto vamos a echar mano de cosas que ya hemos visto en otras ocasiones. Básicamente z-index, position y opacity.

¿Cómo mostrar más texto on hover?

En html, vamos a hacer un div que muestre una linea de texto, pero que al sobrevolar con el ratón muestre otras líneas de texto.

CCS3: Efectos hover para tus menús

Crear efecto hover de resaltado bajo el texto de un elemento de menú .-

• Home
• Trending
• Subscriptions

FLIP CARD CON CSS

Sobre el efecto hover

Seleccionar div, antes de usar la función hover

Texto prueba 1

Texto prueba 2

Texto prueba 3

Texto prueba 4

Este efecto fue extraído de la siguiente URL: https://es.stackoverflow.com/

<div class="Clase">Texto prueba 1</div> <div class="Clase">Texto prueba 2</div> <div class="Clase">Texto prueba 3</div> <div class="Clase">Texto prueba 4</div> <style> .Clase{ height: 30px; width: 100%; background-color: yellow; margin: 10px; cursor: pointer; } .Clase:hover{ /* Cuando estemos encima de un div, cambia a color rojo*/ background-color: red; }</style>

Galería de efectos Blocksera

<link rel='stylesheet' type='text/css' media='all' id='iheg-image-hover-css' href='https://store.blocksera.com/demo/wp-content/plugins/image-hover-effects-block/assets/css/style.min.css?ver=1.4.4' />

Fade

Botón demo

See Demo 1 Lorem Ipsum 1 See Demo 2 Lorem Ipsum 2 See Demo 3 Lorem Ipsum 3

<style> .btn-slide, .btn-slide2, .btn-slide3 { position: relative; display: inline-block; height: 52px; width: 49.5%; line-height: 50px; float: left; padding: 0; background: #fdfdfd; border: 2px solid #0099cc; margin: 0 0 5px 0px; transition: .5s; box-sizing: border-box; border-radius: 50px; } .btn-slide2 { border: 2px solid #efa666; float: right; } .btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color: #efa666; } .btn-slide3:hover { background-color: #2ecc71; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2, .btn-slide3:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd!important; color: #0099cc; } .btn-slide2:hover span.circle2 { color: #efa666; } .btn-slide3:hover span.circle2 { color: #2ecc71; } .btn-slide:hover span.title, .btn-slide2:hover span.title2, .btn-slide3:hover span.title3 { left: 40px; opacity: 0; } .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2, .btn-slide3:hover span.title-hover3 { opacity: 1; left: 40px; } .btn-slide span.circle, .btn-slide2 span.circle2, .btn-slide2 span.circle3 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 40px; height: 38px; width: 40px; top: 0; left: 0; transition: .5s; text-align: center; border-radius: 50px; } .btn-slide2 span.circle2 { background-color: #efa666; } .btn-slide2 span.circle3 { background-color: #2ecc71; } .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2, .btn-slide3 span.title3, .btn-slide3 span.title-hover3 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px; } .btn-slide3 span.title3, .btn-slide3 span.title-hover3 { color: #2ecc71; left: 80px; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0; } .btn-slide span.title-hover, .btn-slide3 span.title-hover3 { left: 80px; opacity: 0; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff; } .btn-slide span.title-hover, .btn-slide3 span.title-hover3 { color: #fff; } .btn-show a.btn-slide3, .btn-show a.btn-slide2:nth-child(1) { width: 100%!important; } </style> <div id="btn-wrap" style="clear: both; display: block; margin: 10px 0px;"> <a class="btn-slide" href="https://aaru-soratemplates.blogspot.com/" rel="nofollow" target="_blank"> <span class="circle"><i aria-hidden="true" class="fa fa-rocket"></i></span> <span class="title">See Demo 1</span> <span class="title-hover"> Lorem Ipsum 1 </span> </a> <a class="btn-slide2" href="https://www.soratemplates.com/2021/09/aaru-blogger-templates.html" rel="nofollow" target="_blank"> <span class="circle2"><i aria-hidden="true" class="fa fa-download"></i></span> <span class="title2">See Demo 2</span> <span class="title-hover2">Lorem Ipsum 2 </span> </a> <a class="btn-slide2" href="https://gum.co/aarupremium?wanted=true" rel="nofollow" style="border-color: rgb(46, 204, 113); clear: both; width: 97%;" target="_blank"> <span class="circle2" style="background: rgb(46, 204, 113);"><i aria-hidden="true" class="fa fa-shopping-cart"></i></span> <span class="title2" style="color: #2ecc71;">See Demo 3</span> <span class="title-hover2">Lorem Ipsum 3 </span> </a> </div>

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

Efecto de desplazamiento de imagen (image shift) usando Html Css | Efecto de desplazamiento de la tarjeta de imagen CSS

Css Image Hover Effect

This is heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat velit qui quos repellat nulla soluta exceptu

Read More

Este efecto fue extraído de la URL adjunta Click aquí: https://codingwithnick.in    (para quienes deseen consultar esa URL)

<style> *, *::before, *::after{ box-sizing: border-box; } html{ line-height: 1.15; } body{ font-family: 'roboto', sans-serif; color: #454545; font-weight: 400; background: #ffffff; } a{ color: #333333; font-weight: 400; outline: none; text-decoration: none; transition: 0.5s; } .container{ width: 100%; padding-right:15px ; padding-left: 15px; margin-right: auto; margin-left: auto; } .row{ display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .column{ position: relative; width: 100%; padding-right: 15px; padding-left: 15px; flex: 0 0 100%; max-width: 100%; } .section-title{ position: relative; width: 100%; text-align: center; padding: 45px 0 30px 0; } .section-title::after{ position: absolute; content: ""; width: 100%; height: 1px; left: 0; background: #eeeeee; } .effect{ position: relative; margin-bottom: 30px; overflow: hidden; } .effect .effect-img{ font-size: 0; overflow: hidden; } .effect .effect-img img{ width: 100%; height: auto; transition: all .3s; } .effect:hover .effect-img img{ transform: scale(1.2); } .effect .effect-text{ position: absolute; top: 15px; right: 15px; bottom: 15px; left: 15px; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(0, 0, 0, .5); overflow: hidden; transition: all .3s ease-in; opacity: 0; } .effect .effect-text .inner{ position: absolute; padding: 15px; z-index: 1; } .effect .effect-text:before, .effect .effect-text:after{ position: absolute; display: block; width: 100%; height: 0; content: ''; } .effect .effect-text:before{ border-top: 3px solid #ffffff; border-right: 3px solid #ffffff; left: -100%; top: 0; } .effect .effect-text:after{ border-bottom: 3px solid #ffffff; border-left: 3px solid #ffffff; left: 100%; bottom: 0; } .effect:hover .effect-text{ opacity: 1; } .effect:hover .effect-text:after, .effect:hover .effect-text:before{ animation-delay: .1s; animation-duration: .5s; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } .effect:hover .effect-text:after{ animation-name: left-up; } .effect:hover .effect-text:before{ animation-name: right-dn; } @-webkit-keyframes left-up { 0% { left: 100%; height: 0; } 50% { left: 0; height: 0; } 100% { height: 100%; left: 0; } } @-webkit-keyframes right-dn { 0% { left: -100%; height: 0; } 50% { left: 0; height: 0; } 100% { height: 100%; left: 0; } } .effect .effect-text h2{ height: 45px; color: #ffffff; font-size: 25px; margin: 0; } .effect .effect-text p{ color: #ffffff; font-size: 16px; margin-bottom: 20px; } .effect .effect-btn .btn{ display: inline-block; height: 35px; padding: 7px 15px; color: #333333; background: #ffffff; } @media (min-width:576px){ .container{ max-width: 540px; } .column{ flex: 0 0 100%; max-width: 100%; } } @media (min-width: 768px){ .container{ max-width: 720px; } .column{ flex: 0 0 50%; max-width: 50%; } } @media (min-width:992px){ .container{ max-width: 960px; } .column{ flex: 0 0 33.333333%; max-width: 33.333333%; } } @media (min-width:1200px){ .container{ max-width: 1140px; } } </style> <div class="container"> <div class="section-title"> <h1>Css Image Hover Effect</h1> </div> <div class="row"> <div class="column"> <div class="effect"> <div class="effect-img"> <img src="https://secure.gravatar.com/avatar/1dd971588aade293d2e89ef42d9590e3?s=1000&d=mm&r=g 2x" alt=""> </div> <div class="effect-text"> <div class="inner"> <h2>This is heading</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat velit qui quos repellat nulla soluta exceptu</p> <div class="effect-btn"> <a href="#" class="btn"><i class="fa fa-eye"></i> Read More</a> </div></div></div></div></div></div></div>

Animación de subtitulos

• 
  Modelo 1

  Nota: Lorem Ipsum

  
  
  
  
  
  
  
  
  
  
  

  Este efecto fue extraído de la siguiente URL: http://hasinhayder.github.io

  
  
  Fuente: http://hasinhayder.github.io/ImageCaptionHoverAnimation/index2.html <style> .caption-style-2{ list-style-type: none; margin: 0px; padding: 0px; } .caption-style-2 li:hover .caption{ opacity: 1; transform: translateY(-100px); -webkit-transform:translateY(-100px); -moz-transform:translateY(-100px); -ms-transform:translateY(-100px); -o-transform:translateY(-100px); } .caption-style-2 img{ margin: 0px; padding: 0px; float: left; z-index: 4; } .caption-style-2 .caption{ cursor: pointer; position: absolute; opacity: 0; top:300px; -webkit-transition:all 0.15s ease-in-out; -moz-transition:all 0.15s ease-in-out; -o-transition:all 0.15s ease-in-out; -ms-transition:all 0.15s ease-in-out; transition:all 0.15s ease-in-out; } .caption-style-2 .blur{ background-color: rgba(0,0,0,0.7); height: 100px; width: 400px; z-index: 5; position: absolute; } .caption-style-2 .caption-text h1{ text-transform: uppercase; font-size: 18px; } .caption-style-2 .caption-text{ z-index: 10; color: #fff; position: absolute; width: 400px; height: 300px; text-align: center; top:20px; } </style> <ul class="caption-style-2"> <li> <img src="http://hasinhayder.github.io/ImageCaptionHoverAnimation/img/everycowboy_dribbbleready_shot.jpg" alt=""> <div class="caption"> <div class="blur"></div> <div class="caption-text"> <h1>Modelo 1</h1> <p>Nota: Lorem Ipsum</p> </div> </div>
  
  

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/

Hola Mundo

Mensaje breve: Lorem ipsum dolor sit amet!

Efecto:imghvr-hinge-down / bisagra hacia abajo

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

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

Nota

Lorem ipsum

Texto

Hover me

Efecto Zoom

Modelo 1

<style>.zoomEffect_1 { position: relative; overflow: hidden; } .zoomEffect_1 img { max-width: 100%; height:auto; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; } .zoomEffect_1:hover img { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } </style> <div class="zoomEffect_1"> <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="photo" width="550" height="367"> </div>

Efecto texto animado (1)

Texto animado 1

Animación de gradiente

Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Este efecto fue elaborado con el generador ofrecido en la siguiente URL: https://codeconvey.com/

Efecto: Rotar animación de imagen al pasar el mouse

Efecto curl-bottom-left - Rizo inferior izquierdo

Ejemplo

<p class="hvr-curl-bottom-left" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p> <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/> <style> /* Curl Bottom Left */ .hvr-curl-bottom-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-curl-bottom-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(45deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-bottom-left:hover:before, .hvr-curl-bottom-left:focus:before, .hvr-curl-bottom-left:active:before { width: 25px; height: 25px; } </style>

Efecto curl-bottom-right - Rizo inferior derecho

Ejemplo

<p class="hvr-curl-bottom-right" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p> <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/> <style> /* Curl Bottom Right */ .hvr-curl-bottom-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-curl-bottom-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(315deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-bottom-right:hover:before, .hvr-curl-bottom-right:focus:before, .hvr-curl-bottom-right:active:before { width: 25px; height: 25px; } </style>

Efecto curl-top-right - Rizo superior derecho

Ejemplo

<p class="hvr-curl-top-right" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p> <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/> <style> /* Curl Top Right */ .hvr-curl-top-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-curl-top-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; right: 0; background: white; /* IE9 */ background: linear-gradient(225deg, white 45%, #aaa 50%, #ccc 56%, white 80%); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-top-right:hover:before, .hvr-curl-top-right:focus:before, .hvr-curl-top-right:active:before { width: 25px; height: 25px; } </style>

Efecto curl-top-left - Rizo superior izquierdo

Ejemplo

<link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/> <style> .hvr-curl-top-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; left: 0; background: white; /* IE9 */ background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000'); /*For IE7-8-9*/ z-index: 1000; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: width, height; transition-property: width, height; } .hvr-curl-top-left:hover:before, .hvr-curl-top-left:focus:before, .hvr-curl-top-left:active:before { width: 25px; height: 25px; } </style> <p class="hvr-curl-top-left" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p>

Efecto Bubble Float Left - Flotador de burbuja a la izquierda

Ejemplo

<p class="hvr-bubble-float-left" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p> <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/> <style> /* Bubble Float Left - Flotador de burbuja a la izquierda */ .hvr-bubble-float-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-left:before { position: absolute; z-index: -1; content: ''; top: calc(50% - 10px); left: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #e1e1e1 transparent transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-left:hover, .hvr-bubble-float-left:focus, .hvr-bubble-float-left:active { -webkit-transform: translateX(10px); transform: translateX(10px); } .hvr-bubble-float-left:hover:before, .hvr-bubble-float-left:focus:before, .hvr-bubble-float-left:active:before { -webkit-transform: translateX(-10px); transform: translateX(-10px); } </style>

Efecto Bubble Float Bottom - Parte inferior del flotador de burbuja

Ejemplo

<p class="hvr-bubble-float-bottom" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p> <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/> <style> /* Bubble Float Bottom - Parte inferior del flotador de burbuja */ .hvr-bubble-float-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-bottom:before { position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); bottom: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #e1e1e1 transparent transparent transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-bottom:hover, .hvr-bubble-float-bottom:focus, .hvr-bubble-float-bottom:active { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .hvr-bubble-float-bottom:hover:before, .hvr-bubble-float-bottom:focus:before, .hvr-bubble-float-bottom:active:before { -webkit-transform: translateY(10px); transform: translateY(10px); } </style>

Efecto Bubble Float Right- Flotador de burbuja a la derecha

Ejemplo

<p class="hvr-bubble-float-right" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p> <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/> <style> /* Bubble Float Right- Flotador de burbuja a la derecha */ .hvr-bubble-float-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-right:before { position: absolute; z-index: -1; top: calc(50% - 10px); right: 0; content: ''; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #e1e1e1; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-right:hover, .hvr-bubble-float-right:focus, .hvr-bubble-float-right:active { -webkit-transform: translateX(-10px); transform: translateX(-10px); } .hvr-bubble-float-right:hover:before, .hvr-bubble-float-right:focus:before, .hvr-bubble-float-right:active:before { -webkit-transform: translateX(10px); transform: translateX(10px); } </style>

Efecto Bubble Float Top - Parte superior de flotador de burbuja

Ejemplo

<p class="hvr-bubble-float-top" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p> <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/> <style> /* Bubble Float Top - Parte superior de flotador de burbuja */ .hvr-bubble-float-top { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-top:before { position: absolute; z-index: -1; content: ''; left: calc(50% - 10px); top: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #e1e1e1 transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .hvr-bubble-float-top:hover, .hvr-bubble-float-top:focus, .hvr-bubble-float-top:active { -webkit-transform: translateY(10px); transform: translateY(10px); } .hvr-bubble-float-top:hover:before, .hvr-bubble-float-top:focus:before, .hvr-bubble-float-top:active:before { -webkit-transform: translateY(-10px); transform: translateY(-10px); } </style>

Efecto Bubble Left - Burbuja izquierda

Ejemplo

<p class="hvr-bubble-left" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p> <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/> <style> /* Bubble Left - Burbuja izquierda */ .hvr-bubble-left { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-bubble-left:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; top: calc(50% - 10px); left: 0; border-width: 10px 10px 10px 0; border-color: transparent #e1e1e1 transparent transparent; } .hvr-bubble-left:hover:before, .hvr-bubble-left:focus:before, .hvr-bubble-left:active:before { -webkit-transform: translateX(-10px); transform: translateX(-10px); } </style>

Efecto Bubble Bottom - Fondo de burbuja

Ejemplo

<p class="hvr-bubble-bottom" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p> <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/> <style> /* Bubble Bottom - Fondo de burbuja */ .hvr-bubble-bottom { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-bubble-bottom:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; left: calc(50% - 10px); bottom: 0; border-width: 10px 10px 0 10px; border-color: #e1e1e1 transparent transparent transparent; } .hvr-bubble-bottom:hover:before, .hvr-bubble-bottom:focus:before, .hvr-bubble-bottom:active:before { -webkit-transform: translateY(10px); transform: translateY(10px); } </style>

Efecto Bubble Right - Burbuja derecha

Ejemplo

<p class="hvr-bubble-right" style="padding:60px 30px;background:crimson;width:100;height:40;text-align:center;font-size:30px;color:#ffffdf;font-weight:600;">Ejemplo</p> <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/> <style> /* Bubble Right - Burbuja derecha*/ .hvr-bubble-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; } .hvr-bubble-right:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; top: calc(50% - 10px); right: 0; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #e1e1e1; } .hvr-bubble-right:hover:before, .hvr-bubble-right:focus:before, .hvr-bubble-right:active:before { -webkit-transform: translateX(10px); transform: translateX(10px); } </style>