;  MY LIFE: IMAGÉNES CON EFECTOS (SÍ OTRA TANDA)

About

02 agosto 2013

IMAGÉNES CON EFECTOS (SÍ OTRA TANDA)

Son efectos que se ven al pasar el ratón por encima. Para poder colocarlos deberemos irnos a la edición html de la entrada y copiar los códigos:








EFECTO GRUNGE
Extraído de http://www.aizumblog.com/

<style>
.grunge {
  background: url("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
  width: 350px; height: 600px;
  margin: 50px;
  -webkit-box-shadow: inset 0 0 20px black;
     -moz-box-shadow: inset 0 0 20px black;
          box-shadow: inset 0 0 20px black;
}

.grunge:hover {
  background: url("http://4.bp.blogspot.com/-Y9vEC7izF48/UY7CmRuW6PI/AAAAAAAANag/IGzD1qzBs3w/s320/imagetreatments-texture3.png"), url("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
}
</style>

EFECTO CRISTAL ROTO

<style>
.cristalroto {
  background: url("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
  width: 350px; height: 600px;
  margin: 50px;
  -webkit-box-shadow: inset 0 0 20px black;
     -moz-box-shadow: inset 0 0 20px black;
          box-shadow: inset 0 0 20px black;
}

.cristalroto:hover {
  background: url("https://dl.dropboxusercontent.com/u/26040166/efectocristalroto.png"), url("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
}
</style>

EFECTO GOTAS DE LLUVIA

<style>
.gotas {
  background: url("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
  width: 350px; height: 600px;
  margin: 50px;
  -webkit-box-shadow: inset 0 0 20px black;
     -moz-box-shadow: inset 0 0 20px black;
          box-shadow: inset 0 0 20px black;
}

.gotas:hover {
  background: url("https://dl.dropboxusercontent.com/u/26040166/53b9c7e48b1f.png"), url("https://dl.dropboxusercontent.com/u/26040166/378_91566920051_88935305051_4699364_3396_n.jpg");
}
</style>