Como fazer a transição do CSS Display + Opacity Properties

No CSS, a transição refere -se a um método para controlar a velocidade do elemento adicionado enquanto aplica as propriedades do CSS. Mais especificamente, você pode executar várias transições, incluindo transições de página, transições de imagem, texto e muito mais. Você pode especificar as alterações a serem aplicadas após uma quantidade específica de período de tempo, em oposição a trocar as mudanças da propriedade imediatamente.

Este post explica o método para definir a transição com a ajuda do CSS “mostrar" e "opacidade”Propriedades.

Como fazer a transição de propriedades "exibição" e "opacidade"?

Para fazer a transição CSS “mostrar" e "opacidade”Propriedades, primeiro, fazem um contêiner de div com o“" elemento. Em seguida, acesse o recipiente de div e adicione uma imagem de fundo com a ajuda do “imagem de fundo" propriedade. Depois disso, defina o “transição","opacidade”E outras propriedades necessárias de acordo com sua escolha.

Etapa 1: Crie um contêiner "div"

Inicialmente, faça um contêiner de div com a ajuda do ““Container e adicione um atributo de classe com um nome específico. Para fazer isso, definimos o nome da classe como “item”:

Etapa 2: Defina a propriedade "Display"

Em seguida, acesse o contêiner div, utilizando o nome da classe “Item principal”E defina o“mostrar" propriedade:

.Main-Item
exibição: bloco;

Aqui, o valor do “mostrar”A propriedade é definida como“bloquear”Para adotar toda a largura da tela.

Etapa 3: Adicione a imagem de fundo

Em seguida, aplique as seguintes propriedades CSS no contêiner Div acessado:

.Main-Item
Altura: 400px;
Largura: 400px;
Imagem de fundo: URL (Spring-Flowers.jpg);
Opacidade: 0.1;
Transição: Opacity 2s facilidade;
margem: 30px 50px;

No trecho de código acima mencionado:

• ““altura" e "larguraAs propriedades determinam o tamanho do elemento definido.
• ““imagem de fundo”A propriedade CSS é usada para inserir uma imagem com a ajuda do“url ()”Função na parte traseira do elemento.
• ““opacidade”Determina o nível de opacidade para um elemento. O nível de opacidade demonstra o nível de transparência, onde “1”É usado sem transparência e“0.5" é para "50%”Transparência.
• ““transição”No CSS, permite que os usuários alterem os valores da propriedade sem problemas em uma determinada duração.
• ““margem”Define o espaço fora do limite definido em torno de um elemento.

Saída

Etapa 4: Aplique “: Pseudo -seletor de pau”

Agora, acesse o recipiente de div ao longo do “:flutuar”Pseudo -seletor que é utilizado para selecionar elementos quando passamos o mouse sobre eles:

.Principal-item: Hover
opacidade: 1;

Então, defina o “opacidade"Do elemento selecionado como"1”Para remover a transparência.

Saída

Isso se trata de definir propriedades CSS de transição "Display" e "Opacity".

Conclusão

Para definir as propriedades de transição "Display" e "Opacity", primeiro, faça um contêiner div usando o elemento. Em seguida, acesse o elemento div e defina “mostrar" como "bloquear”. Depois disso, aplique as outras propriedades do CSS, incluindo “imagem de fundo”Para inserir uma imagem no contêiner,“ transição ”,“ opacidade ”e outros. Este post explicou o método para definir a transição com CSS “mostrar" e "opacidade”Propriedades.