Como fazer a transição das propriedades CSS “display” + “opacity”

Passo 2: Defina a propriedade “display”

Em seguida, acesse o contêiner div utilizando o nome da classe “ item principal ” e defina o “ mostrar ' propriedade:

Aqui, o valor do “ mostrar ” propriedade é definida como “ bloquear ” para ocupar toda a largura da tela.

Etapa 3: adicionar imagem de plano de fundo

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

No trecho de código acima indicado:

• “ altura ' e ' largura ” determinam o tamanho do elemento definido.
• “ imagem de fundo ” A propriedade CSS é usada para inserir uma imagem com a ajuda do “ URL() ” na parte de trás do elemento.
• “ opacidade ” determina o nível de opacidade de um elemento. O nível de opacidade demonstra o nível de transparência, onde “ 1 ” é usado para nenhuma transparência e “ 0,5 ' é para ' cinquenta% ” transparência.
• “ transição ” em CSS permite que os usuários alterem os valores das propriedades suavemente durante um determinado período.
• “ margem ” define o espaço fora do limite definido em torno de um elemento.

Saída

Passo 4: Aplique o Pseudo Seletor “:hover”

Agora, acesse o contêiner div ao longo do “ :flutuar ” pseudo seletor que é utilizado para selecionar elementos quando passamos o mouse sobre eles:

Em seguida, defina o “ opacidade ” do elemento selecionado como “ 1 ” para remover a transparência.

Saída

Isso é tudo sobre como definir as propriedades de 'exibição' e 'opacidade' do CSS de transição.

Conclusão

Para definir as propriedades de “exibição” e “opacidade” da transição, primeiro crie um contêiner div usando o elemento