0

Duvidas;

#HTML #JavaScript #CSS
Maxwell Gallucci
Maxwell Gallucci

Fala Devs.

Eu aqui treinando um pouco em js, html e css.. to fazendo um site "e-commerce" para minha namorada para ela vender os laços que ela produz.


enfim..


Baseado na aula da interface da netflix, queria dar um zoom na imagens do rolo, como se abrisse uma janela ao passar o mouse.


a única coisa que consegui fazer foi mexer no webkit-transform. mas ela só da um pequeno aumento conforme eu altero a scale.



alguem pode me dizer onde eu mexo pra descobrir essa função?


segue o codigo css que fiz para o zoom.


.box-img{

    height: 100%;

    width: 100%;

    display:block;

    overflow: hidden;

}

.box-img:hover{

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}



desculpa ai pela duvida boba, e obrigado pela atenção.

0
3

Comentários (3)

0
Maxwell Gallucci

Maxwell Gallucci

12/05/2021 20:55

Obrigado Northon e Edson.


Vou seguir a dicas de voces e ver se consigo aplicar aqui no projeto!

Valeeu!

0
Edson Souza

Edson Souza

12/05/2021 20:47

Maxwell, boa noite. Com certeza existem várias maneiras de fazer isso que você quer . No meu projeto do Netflix não usei esse efeito. Abaixo segue um jeito que testei e funcionou aqui para mim.


A minha imagem está em uma div com a class zoom.

.zoom {

overflow: hidden;

}


.zoom img {

max-width: 100%;

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

}


.zoom:hover img {

-moz-transform: scale(1.1);

-webkit-transform: scale(1.1);

transform: scale(1.1);

}


Abaixo segue um canal muito bom com umas idéias para css. O cara é monstro e os vídeos são bem detalhados. Sucesso para você e sua namorada.


O canal: https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog

0
Northon Tome

Northon Tome

12/05/2021 20:30

Primeiramente não existe pergunta boba,

Perante a sua duvida veja se o link abaixo te ajuda

https://www.portalgsti.com.br/2017/08/efeito-de-zoom-com-mouse-sobre-a-imagem-so-com-css.html

"Dare mighty things" Formação em técnico de informática sou um grande entusiasta de tecnologia e busco sempre aprimorar meus conhecimentos na área.

Brasil