Tipo o desse site -> https://flamengomaior.com.br/
Um zoom suave feito o desse site. Qual a maneira mais simples de se fazer isso? Se possivel em CSS/HTMl.
Tipo o desse site -> https://flamengomaior.com.br/
Um zoom suave feito o desse site. Qual a maneira mais simples de se fazer isso? Se possivel em CSS/HTMl.
Você usa scale
na imagem com :hover
e overflow: hidden
na div
que a contém. Você ajusta o scale
conforme seu gosto onde, 1.1
, por exemplo, aumenta a imagem em 10%, e .5s
é o tempo da transição (meio segundo ou 500 milissegundos).
A função scale
basicamente altera o zoom do elemento (mais sobre aqui).
O overflow: hidden
evita que a imagem vaze para fora da div
ao aplicar o zoom.
A estrutura básica seria esta usando uma div
, mas você pode usar um link <a>
também, se desejar:
.img-container{
width: 300px;
height: 200px;
overflow: hidden;
border: 2px solid #000;
}
.img-container img{
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform .5s ease;
transition: transform .5s ease;
}
.img-container:hover img{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div class="img-container">
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
</div>