Descripción en una imagen o foto al pasar el ratón


<center><style type="text/css">
.img-side{
background: #E7E7E9;
color: #000000;
width: 305px;
height: 305px;
margin-top:-315px;
opacity: 0;
-webkit-transition:all .5s ease-in-out; }
.img-side:hover{
opacity:.7
}
</style>
<img src="https://1.bp.blogspot.com/-vZsEdPLtw_s/WNoqsxtctkI/AAAAAAAAAro/sUG0OucJUFI4rVhZ6930Rc9hgAPZeBCZwCLcB/s1600/yt_logo.png" width="300" />
<br />
<div class="img-side">
<br />
<center><FONT FACE="arial" SIZE=2 COLOR=#000000>AQUI LA DESCRIPCION QUE QUIERES QUE SALGA AL PONER EL RATON SOBRE LA IMAGEN</FONT></center></div></center>

cambiar una imagen por otra al pasar el raton



<img src="URL de la imagen inicial" onmouseover="this.src='URL de la imagen posterior';" onmouseout="this.src='URL de la imagen inicial';"/>


Como poner el efecto de color a blanco y negro de tus imágenes al pasar el ratón o mouse



Para que cambie de color a blanco y negra o al reves al pasar el ratón:

.post-body img { /* Le damos la orden de que solo se aplique en las entradas*/
-webkit-filter: grayscale(0%);  /* Imagen original a color */
}
  /* Efectos al pasar el cursor sobre la imagen*/
.post-body img:hover {   /* Da la orden que se aplique al pasar el cursor dentro de las imagenes de las entradas*/
 border-radius: 0%;   /* Nos hace la imagen en circulo*/
 -webkit-filter: grayscale(100%);   /* Pone el efecto Blanco y Negro*/
}

Si queremos que de una vuelta y cambie de color al pasar el ratón:

.post-body img {
-webkit-filter: grayscale(0%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post-body img:hover {
 border-radius: 0%;
 -webkit-filter: grayscale(100%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
Related Posts Plugin for WordPress, Blogger...