Rogama: CSS - Efecto marca de agua

domingo, 9 de noviembre de 2014

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 si 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 mas del 90% de los casos no intentara cogerla.

Os explico, para conseguirlo necesitamos un Div que lo contenga todo y 2 imagenes, 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';