Opacidad / Transparencia con CSS

La propiedad opacity especifica la opacidad / transparencia de un elemento. Dicha propiedad puede tomar valores entre 0.0 y 1.0. El resultado quedaría así:

Ejm

img {
  opacity: 0.5;
}

Efecto de transparencia con :hover

La propiedad opacity a menudo se usa junto con el selector :hover para cambiar la opacidad al pasar el mouse.

Ejm

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

Efecto de transparencia con :hover (2)

Este es otro ejemplo de transparencia con la pseudo-clase :hover

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>La propiedad opacity se usa a menudo junto con el :hover
Selector para cambiar la opacidad al pasar el mouse:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>

Transparencia usando RGBA

Si no deseas aplicar opacidad a los elementos secundarios, como en nuestro ejemplo anterior, usa valores de color RGBA. El siguiente ejemplo establece la opacidad para el color de fondo y no para el texto.

Ejm

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

Texto en una caja transparente

Ejm

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

El resultado sería