TODO HOVER: 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>

Modelo 2

<style>.zoomEffect_2{
    display:inline-block;
    border:0;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);   
}
.zoomEffect_2:hover{
    box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.2);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.2);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.2);
    transition: all 200ms ease-in;
    transform: scale(1.2);
}

</style>

<div class="zoomEffect_2">
   <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>

Los efectos de los modelos 1 y 2, fueron extraídos de la siguiente URL: https://codeconvey.com/

Modelo 3

<style>.zoomImage {
    border:10px solid #fff;
    outline:1px solid #ccc;
    width: 900px;
    height:530px;
    overflow: hidden;
    margin:0 auto;
}
.zoomImage img {
    width: 900px;
    height:530px;
    max-width: 100%;
    height: auto;
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -o-transition: 0.8s;
    -ms-transition: 0.8s;
    transition: 0.8s;
}

.zoomImage img:hover {
  -moz-transform: scale(2) rotate(0deg);
  -webkit-transform: scale(2) rotate(0deg);
  -o-transform: scale(2) rotate(0deg);
  -ms-transform: scale(2) rotate(0deg);
  transform: scale(2) rotate(0deg);
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
  -ms-transition: 0.8s;
  transition: 0.8s;
}
</style>

<div class="zoomImage">
  <img src="https://th.bing.com/th/id/R.54ce4fdde630bac73c646f1cef7a2b47?rik=UzrFGosGQvwIqA&pid=ImgRaw&r=0" alt="photo" />
</div>

El modelo 3, fue extraído de la URL: https://codeconvey.com/

Para complementar:

https://programacion.net/

https://www.jose-aguilar.com/

https://comohacerunapagina.es

https://ugaoproject.es

https://themewp.inform.click/

sábado, 4 de junio de 2022

Efecto Zoom