domingo, 12 de junio de 2022

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

Fade

Seguir leyendo »

martes, 7 de junio de 2022

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/

domingo, 5 de junio de 2022

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

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>

sábado, 4 de junio de 2022

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/

example-image — Hola Mundo

Mensaje breve: Lorem ipsum dolor sit amet!

Efecto:imghvr-hinge-down / bisagra hacia abajo

Seguir leyendo »

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

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

Nota

Lorem ipsum

Seguir leyendo »

Texto

Hover me

Seguir leyendo »

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>

Seguir leyendo »

Efecto texto animado (1)

Texto animado 1

Seguir leyendo »

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/

Seguir leyendo »

viernes, 3 de junio de 2022

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

Seguir leyendo »

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>

Efecto SPEECH BUBBLES - Parte superior de la burbuja

Ejemplo



<p class="hvr-bubble-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>
/* SPEECH BUBBLES  - Parte superior de la burbuja */
/* Bubble Top */
.hvr-bubble-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;
}
.hvr-bubble-top: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);
  top: 0;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #e1e1e1 transparent;
}
.hvr-bubble-top:hover:before, .hvr-bubble-top:focus:before, .hvr-bubble-top:active:before {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}
</style>

Transiciones de sombras (hvr-shadow-radial)


<link href="css/hover-min.css" rel="stylesheet">
  
  
  https://ianlunn.github.io/Hover/
  
  https://ianlunn.github.io/Hover/css/hover.css
  
  <STYLE>  .reading{
    background-color: #f9f9;
    color:#ffffd;
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 45px;
    border-radius: 12px;
    font-size: 28px;
    text-align: justify;
    background-size: contain;
  }


.hvr-shadow-radial {
  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-shadow-radial:before, .hvr-shadow-radial:after {
  pointer-events: none;
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 15px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.hvr-shadow-radial:before {
  bottom: 100%;
  background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.hvr-shadow-radial:after {
  top: 100%;
  background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.hvr-shadow-radial:hover:before, .hvr-shadow-radial:focus:before, .hvr-shadow-radial:active:before, .hvr-shadow-radial:hover:after, .hvr-shadow-radial:focus:after, .hvr-shadow-radial:active:after {
  opacity: 1;
}
</STYLE>


<p class="reading h   hvr-shadow-radial"  >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</p>

Efecto Float Shadow - Sombra flotante

Ejemplo


<p class="hvr-float-shadow" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>
/* Float Shadow - Sombra flotante */
.hvr-float-shadow {
  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-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
</style>

Efecto Box Shadow Inset - Recuadro de sombra

Ejemplo



<p class="hvr-box-shadow-inset" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>
/* Box Shadow Inset -  Recuadro de sombra */
.hvr-box-shadow-inset {
  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);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hvr-box-shadow-inset:hover, .hvr-box-shadow-inset:focus, .hvr-box-shadow-inset:active {
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
</style>

Efecto Box Shadow Outset - caja con sombra al principio de la caja

Ejemplo


<p class="hvr-box-shadow-outset" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>
/* Box Shadow Outset */
.hvr-box-shadow-outset - caja de sombra al principio {
  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);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hvr-box-shadow-outset:hover, .hvr-box-shadow-outset:focus, .hvr-box-shadow-outset:active {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
</style>

Efecto Grow Shadow - crecer sombra

Ejemplo



<p class="hvr-grow-shadow" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>
/* Grow Shadow - crecer sombra */
.hvr-grow-shadow {
  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);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>

Efecto Shadow - Sombra

Ejemplo


<p class="hvr-shadow" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>
/* Shadow -  Sombra */
.hvr-shadow {
  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);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
</style>

Efecto Glow - Resplandor

Ejemplo



<p class="hvr-glow" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>
/* SHADOW/GLOW TRANSITIONS - Transiciones de sombras y brillos */
/* Glow -  Resplandor */
.hvr-glow {
  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);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
</style>

Efecto Overline Reveal - Revelar

Ejemplo



<p class="hvr-overline-reveal" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>
/* Overline Reveal -  Revelar */
.hvr-overline-reveal {
  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;
  overflow: hidden;
}
.hvr-overline-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-reveal:hover:before, .hvr-overline-reveal:focus:before, .hvr-overline-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
</style>

Efecto Underline Reveal - Subrayar revelar

Ejemplo


<p class="hvr-underline-reveal" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>

/* Underline Reveal -  Subrayar revelar*/
.hvr-underline-reveal {
  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;
  overflow: hidden;
}
.hvr-underline-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-reveal:hover:before, .hvr-underline-reveal:focus:before, .hvr-underline-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
</style>

Efecto Reveal - Revelar

Ejemplo



<p class="hvr-reveal" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>

/* Reveal -  Revelar  */
.hvr-reveal {
  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;
  overflow: hidden;
}
.hvr-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-color: #2098D1;
  border-style: solid;
  border-width: 0;
  -webkit-transition-property: border-width;
  transition-property: border-width;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-reveal:hover:before, .hvr-reveal:focus:before, .hvr-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  border-width: 4px;
}
</style>

Efecto Overline From Right - Línea superior desde la derecha

Ejemplo



<p class="hvr-overline-from-right" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>
/* Overline From Right - Línea superior desde la derecha  */
.hvr-overline-from-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;
  overflow: hidden;
}
.hvr-overline-from-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  top: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-from-right:hover:before, .hvr-overline-from-right:focus:before, .hvr-overline-from-right:active:before {
  left: 0;
}
</style>

Efecto Overline From center - Línea superior desde el centro

Ejemplo


<p class="hvr-overline-from-center" style="padding:60px 30px;background:orange;width:100;height:40;text-align:center;font-size:30px;color:blue;font-weight:600;">Ejemplo</p>

  <link href='https://ianlunn.github.io/Hover/css/hover.css' rel='stylesheet' type='text/css'/>
<style>
/* Overline From center - Línea superior desde el centro*/

.hvr-overline-from-center {
  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;
  overflow: hidden;
}
.hvr-overline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  top: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before {
  left: 0;
  right: 0;
}
</style>

domingo, 12 de junio de 2022

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

Fade

martes, 7 de junio de 2022

domingo, 5 de junio de 2022

Css Image Hover Effect

This is heading

sábado, 4 de junio de 2022

Modelo 1

Hola Mundo

Nota

viernes, 3 de junio de 2022