Cómo controlar la opacidad un elemento HTML

En este momento estás viendo Cómo controlar la opacidad un elemento HTML
  • Autor de la entrada:
  • Categoría de la entrada:CSS3
  • Tiempo de lectura:5 minutos de lectura
Twittear
Compartir
Compartir
0 Compartir

La opacidad es una característica que tienen los objetos que no deja pasar la luz. Por defecto, todos los elementos HTML son opacos, y esto lo podemos esto comprobar cuando, por ejemplo, colocamos un elemento encima de otro utilizando las propiedades position y z-index.. Pues bien, CSS dispone de una propiedad denominada como Opacacity con la cual podemos controlar la opacidad un elemento y crear interesantes efectos visuales en nuestros sitios web, y esto lo hacemos simplemente definiendo un valor entre 0.0 y 1.0.

La sintaxis es la siguiente:

opacity: value
  • value: es un valor que abarca un rango desde 0.0 a 1.0, donde 1.0 es el valor por defecto e indica que el objeto es totalmente opaco. Cualquier valor entre 0.99 y 0.01 añade cierto grado de transparencia al elemento. El valor 0.0 hace que el elemento sea totalmente transparente.

Para ver cómo funciona esta propiedad crearemos tres elementos <div> con un color de fondo. A todos los elementos les agregaremos diferentes niveles de opacidad. Primero creamos la estructura HTML:

<h1>Cajas transparentes</h1>
<div class="uno"><p>opacity 0.1</p></div>
<div class="dos"><p>opacity 0.5</p></div>
<div class="tres"><p>opacity 0.8</p></div>
<div><p>opacity 1 (valor por defecto)</p></div>

Ahora creamos las reglas CSS:

div {
  background-color: #4CAF50;
  padding: 10px;
}
div.uno {
  opacity: 0.1;
}
div.dos {
  opacity: 0.5;
}
div.tres {
  opacity: 0.6;
}

Aquí tenemos el resultado:

See the Pen Untitled by simplicitytree (@simplicitytree) on CodePen.

OPACIDAD EN IMÁGENES

Ahora veamos otro ejemplo pero aplicado sobre algunas imágenes. Primero creamos la estrctura HTML:

<div class="transparencia">
<h2>Imágenes transparentes</h2> 
<img class="imagen1" src="https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68" alt="Imagen de un faro">
<img class="imagen2" src="https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68" alt="Imagen de un faro">
<img class="imagen3" src="https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68" alt="Imagen de un faro"> 
</div>

Ahora la regla CSS:

div.transparencia img {
width: 33%;
height: auto;
}
img.imagen1 {
opacity: 1;
}
img.imagen2 {
opacity: 0.4;
}
img.imagen3 {
opacity: 0.1;
}

See the Pen OPACIDAD EN IMÁGENES by simplicitytree (@simplicitytree) on CodePen.

EFECTO HOVER

Ahora veamos otro ejemplo de aplicación de la propiedad Opacity y es en el denominado Efecto Hover, el cual se produce cuando colocamos el cursor encima de un elemento. En este caso vamos a crear un ejemplo en donde al pasar el cursor encima de una imagen la misma se volverá transparente, un comportamiento que de seguro habrás visto en diferentes portales web.

<div class="hover">
<h2>Efecto Hover</h2> 
<img class="paisaje" src="images/paisaje.jpg" alt="Imagen de un paisaje">
</div>

Acá tenemos las reglas CSS:

div.hover img {
width: 50%;
}
img.paisaje:hover {
opacity: 0.45;
}

See the Pen EFECTO HOVER EN IMÁGENES by simplicitytree (@simplicitytree) on CodePen.

Artículos Relacionados
Crear columnas múltiples con CSS3
Curso de Diseño Web: HTML y CSS desde cero hasta avanzado
Cómo crear bordes redondeados con CSS
Orlando José-Rivera
Últimas entradas de Orlando José-Rivera (ver todo)

Deja una respuesta