CSS – Efecto marca de agua

Buenas amigos, hoy os traigo algo que seguramente os resulte muy útil.
Mediante unos estilos CSS vamos a conseguir un efecto de marca de agua, esto no es seguro, pero sí muy disuasorio, ya que si alguien quiere robarnos la imagen, va a ver nuestro logo, o la imagen que definamos sobre la imagen en cuestión y en más del 90% de los casos no intentara cogerla.

Como buenos maquetadores web conseguiremos un efecto muy chulo.

Os explico, para conseguirlo necesitamos un Div que lo contenga todo y 2 imágenes, una que se va a utilizar como marca de agua y la otra que es la que mostraremos, algo similar a esto

<div class=»marca-de-agua»>
<img alt=»» src=»URL-IMAGEN» /></div>

y los siguientes estilos CSS:

.marca-de-agua {
background-image: url(«../img/rogamaLogo.png»);
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: auto;
margin: auto;
}
.marca-de-agua img {
padding: 0;
width: 100%;
height: auto;
opacity: 0.7;
}

El código LESS:

@import ‘variables.less’;
.marca-de-agua {
background-image: url(«@{ruta-img}@{img-marca-agua}»);
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: auto;
margin: auto;
img{
padding:0;
width:100%;
height: auto;
opacity: @opacity-img;
&:hover{
opacity: 1;
transition: 1s;
}
}
}
//**************variables.less**********//
@opacity-img: .7;
@ruta-img: ‘../img/’;
@img-marca-agua: ‘rogamaLogo.png’;

quedaría algo así:

Os dejo todo el código en el siguiente repositorio
https://github.com/rogama/ejemplos-HTML5-CSS3

Rogama Informática

Apasionado de la montaña, del SEO y la programación a partes iguales, llevo más de 20 años trabajando en distintos sectores, pero siempre enfocado a la web, si quieres saber más de mí, sigue el enlace.