Opacidade em CSS é uma propriedade que especifica o controle da transparência de elementos como contente ou imagens . Usando esta propriedade, podemos definir qualquer imagem como completamente opaca ( visível ), totalmente transparente ( escondido ) ou translúcido (parcialmente visível). É necessário um valor numérico entre 0 e 1. Onde 0 define totalmente transparente e 1 define completamente visível. Valores de opacidade entre 0 e 1, como 0,2, 0,4, 0,6, etc., alteram uma imagem de transparente para opaca aumentando gradualmente o valor decimal.

Sintaxe

 opacity : 

O valor numérico deve estar entre 0 e 1 para tornar a imagem semitransparente. Se fornecermos 1, a imagem ficará opaca; se o valor numérico for 0, a imagem ficará completamente transparente.

Exemplo 1 : Neste exemplo, usaremos a propriedade opacity para tornar o elemento transparente ao mover o mouse sobre o elemento.

Principal.html

 Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. 

Saída

Passe o mouse sobre a caixa vermelha para exibir um efeito de transparência ou opacidade.

Opacidade de transição em CSS

Em CSS, um opacidade de transição é uma propriedade usada para alterar suavemente o estado de opacidade de um nível para outro estado. Isso significa que a opacidade da transição altera o estado do elemento opaco para transparente com uma duração de tempo definida. A transição possui quatro propriedades: propriedade de transição, duração de transição, função de tempo de transição e atraso de transição, usadas para realizar o efeito de opacidade em uma imagem. O duração da transição é uma propriedade importante para mudanças graduais ou mudanças repentinas que refletem o efeito de opacidade em um elemento durante um período de tempo definido em milissegundos ou segundos.

A propriedade abreviada da transição é a seguinte:

 transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay]; 

Sintaxe para definir a opacidade da transição em CSS

 { transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } 

Propriedade de transição

A seguir estão as propriedades de transição usadas para controlar os efeitos de transição.

Nota: Ao definir a propriedade de transição para a imagem ou conteúdo, devemos definir a propriedade de duração de transição; caso contrário, a duração se tornará 0 e não terá nenhum efeito.

A necessidade de opacidade de transição em CSS

O opacidade é uma propriedade CSS simples usada para controlar a transparência de uma imagem, definindo o intervalo de opacidade de 0 a 1. Ela reflete a mudança estática ou repentina em um elemento para mostrar o efeito de opacidade. Por exemplo, se quisermos exibir uma imagem transparente, temos que definir o valor de opacidade de 0 a 1. Depois disso, mostra o efeito de opacidade imediatamente em vez de demorar algum tempo. Portanto, usamos um opacidade de transição em CSS que controla a transparência de um elemento durante um período de tempo definido. Usando a função de tempo de transição na opacidade de transição, podemos determinar a curva de velocidade de um elemento que especifica o efeito de opacidade rápido em uma imagem. Dessa forma, usamos o efeito de opacidade de transição para refletir as alterações no período de tempo especificado, em vez de ocorrerem imediatamente.

Exemplo 2: Neste exemplo, usaremos a propriedade de opacidade de transição que reflete o efeito de opacidade em um período de tempo especificado, em vez de imediatamente.

Arquivo1.html

 CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p>  https://www.javatpoint.com/  </p> 

Saída