Como ampliar uma imagem no mouse pairar usando CSS

O CSS “transição”A propriedade é usada para adicionar efeitos nos diferentes elementos HTML, como alterar a largura, a altura, o tamanho e a posição dos elementos. Ao usar esta propriedade, você também pode zoom uma imagem no mouse pairar com a combinação de propriedade de transformação e: o elemento de pseudo-classe pairar.

O objetivo deste artigo é ensinar o procedimento de ampliar uma imagem em um mouse mouse. Então vamos começar!

Como ampliar uma imagem no mouse pairar usando CSS?

O "transição" e "transformar”As propriedades do CSS são usadas para ampliar uma imagem em um mouse mouse. Antes de entrar na implementação, discutiremos as propriedades mencionadas uma por uma!

Propriedade "Transição" CSS

O "transição”A propriedade é utilizada para alterar o valor das propriedades CSS, como largura, altura, opacidade e transformar dentro de um período específico de tempo. É uma propriedade abreviada de quatro outras propriedades.

Confira a sintaxe da propriedade de transição.

Sintaxe

Transição: Duração da transição de transição-propriedade
Dellay de transição de função de tempo de transição

A descrição das propriedades mencionadas acima é dada abaixo:

• Property de transição: É utilizado para definir a transição para qualquer propriedade CSS, como largura, altura, opacidade, transformação e muito mais.

• duração da transição: É utilizado para ajustar a duração da transição.

• Função de Timing de Transição: É usado para definir a velocidade da transição.

• Dellay de transição: Especifica quando a transição é iniciada ou atrasos.

Propriedade "Transformar" CSS

Para a transformação 2D e 3D dos elementos HTML, a propriedade "Transform" do CSS é usada. Ao utilizar esta propriedade, você pode modificar a forma e o tamanho dos elementos. Ele também permite que um elemento gire, incline e escala.

Sintaxe

A sintaxe do “transformar”Propriedade é:

Transform

A descrição da propriedade Transform é dada abaixo:

• nenhum: É usado para definir nenhuma transformação dos elementos.

• Função de transformação: É utilizado para definir a função da propriedade de transformação como girtate (), skew (), tradução () e escala (). Além disso, a função Scale () redimensiona o elemento nas direções horizontal e vertical.

Exemplo 1: zoom uma imagem no mouse pairar

Para ampliar uma imagem em um mouse, primeiro, adicione uma imagem no HTML e depois aplique o efeito do mouse.

Etapa 1: Adicione a imagem na div

Para ampliar uma imagem no mouse pairar usando CSS, primeiro, adicionaremos uma imagem no “div”. Para fazer isso, use a tag e defina a fonte da imagem como "imagem.png ” dentro de .

Html

Etapa 2: Div de estilo

No CSS, usaremos “div”Para acessar a div que criamos em HTML, então defina a altura da div como“250px”E a cor de fundo como“RGB (134, 240, 227)”. Além disso, ajustaremos a borda ao redor da div, definindo a largura como "10px", estilo como "cume" e cor como "rgb (2, 141, 127)".

CSS

div
Altura: 250px;
Antecedentes: RGB (134, 240, 227);
fronteira: 10px Ridge RGB (2, 141, 127);

Etapa 3: Defina a posição da imagem e aplique a propriedade "transição"

Na próxima etapa, defina a posição da imagem usando o preenchimento como "80px" e "160px". Vamos usar a largura como “150px”Para ajustar o tamanho da imagem. Depois disso, aplique a propriedade de transição à imagem, definindo o valor da propriedade de transição como "transformar" e a duração da transição como "0s”:

img
preenchimento: 80px 160px;
Largura: 150px;
transição: transformar 0s;

Nota: Os valores do preenchimento são definidos como “80px”Representa o preenchimento de cima e inferior, e“160px”Indica o preenchimento da esquerda e da direita.

Etapa 4: Zoom uma imagem usando a propriedade "Transform" no Hover

Agora, vamos usar “.IMG: Passe o mouse”Para vincular a imagem ao elemento pseudo-classe pairada. Como resultado, o hover será aplicado à imagem. Em seguida, para ampliar uma imagem no mouse pairar, utilizaremos a propriedade Transform e definiremos o valor da função de escala como “(1.9)”Para redimensionar a imagem nas direções horizontal e vertical:

IMG: Hover
Transformar: escala (1.9);

Como você pode ver, a imagem é ampliada quando o mouse sobre ela:

Vamos passar para o próximo exemplo, no qual iremos ampliar um gif no mouse pairar.

Exemplo 2: Zoom um gif no mouse pairar

Primeiro, adicionaremos um GIF no HTML usando a tag e especificaremos sua fonte de GIF como “Gif.gif”:

Vamos estilizar a div igualmente que o exemplo anterior. Depois disso, defina a posição do GIF usando o preenchimento como “50px" e "200px”:

img
preenchimento: 50px 200px;
Largura: 150px;
transição: transformar 0s;

Em seguida, vamos usar “IMG: Passe o mouse”E defina o valor da função de escala como“1.6”:

IMG: Hover
Transformar: escala (1.6);

Ao fazer isso, o GIF ficará zoom-in quando o mouse sobre ele:

É isso! Discutimos o método de ampliar uma imagem no mouse pairar.

Conclusão

Para ampliar uma imagem em um mouse pairar "Transição" e "Transformar" Propriedades do CSS são usadas. Primeiro, aplique a propriedade de transição na imagem e defina o valor como transformação. Então no “:flutuar”Pseudo-classe elemento, use a propriedade Transform e defina o valor da função Scale (). Neste manual, aprendemos o método para ampliar uma imagem no mouse pairar usando CSS e fornecer exemplos.