TUTO Efecto blanco y negro al poner el cursor sobre la imágen
Primer código a copiar en este tutorial:
.bw {-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}.bw:hover {-webkit-filter: grayscale(100%);}.pic {float: center;margin: 20px;overflow: hidden;}
Segundo código a copiar en este tutorial:
<div class="bw pic"><img src="URL DE TU IMÁGEN" alt="sea"></div>
Ojo: Unicamente debes modificar lo que está en amarillo... Tu solo sigue los pasos del tutorial en el blog Confia en Cristo.
Tercer código a copiar si quieres la imagen centrada:
Si quieres que la imagen con este efecto se visualice centrada, como te explico al final del tutorial allá en el blog, entonces utiliza este código:
<center><div class="bw pic"><img src="URL DE TU IMÁGEN" alt="sea"></div></center>
Si quieres la imagen a la derecha o izquierda,
entonces modifica el center en el códigoanterior
por uno de estos dos siguientes, según sea tu necesidad: