Generador de overlays CSS

Genera un overlay para tus imágenes con CSS

Imagen con overlay

Código Generado

<div class="image-container">
  <img src="tuimagen.jpg" alt="Imagen" />
  <div class="overlay"></div>
</div>
.image-container {
  position: relative;
  display: inline-block;
}
.image-container img {
  max-width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  opacity: 0.5;
  pointer-events: none;
}