[SOLUCIONADO] Conseguir efecto over mouse

[Jairba]

Hola amigos,

En mi home tengo 4 imágenes redondas que son un link a determinados sitios de la página. Me gustaría conseguir un efecto over mouse, por ejemplo que se oscureciera la imagen al pasar sobre ella.

¿Podrían decirme como hacerlo?

Muchas gracias

Un saludo!!

[pzin]

Puede usar un pseudo elemento con un color oscuro transparente que solo se ve al pasar el ratón por encima.

[mardojai]

Un ejemplo: http://jsfiddle.net/6obqbjhk/.
Saludos!

[Jairba]

Muchísimas gracias por el ejemplo Mardojai!!

Por desgracia lo he probado y me funciona, luego me lo miraré con más calma porque está claro que tiene que servir.
Solo hay que cambiar la ruta de la foto del html, no? Yo es lo que he hecho y el CSS lo he copiado tal cual.
No se si hay que hacer algo más...han sido las primeras líneas de html que ponía en el programa.

[mardojai]

A ver, lo explico un poco (le he hecho unas mejoras al código) xD,

Esto va en tu html, en "aqui_va_la_ruta_de_tu_imagen" pones la ruta xD

Código HTML:

<div class="imagen">
    <img src="aqui_va_la_ruta_de_tu_imagen" />
</div>
 

Esto va en tu css, le pondré unas anotaciones para que entiendas mejor el código.

Código CSS:

.imagen, .imagen:before, .imagen img {
   height: 200px; /* Le asignas el alto a la imagen */
   width: 200px; /* Le asignas el ancho a la imagen */
}
.imagen {
    position: relative;
}
.imagen:before {
    border-radius: 100%;
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;    
    background: transparent;
    transition: background .2s linear;
}
.imagen:hover:before {
    background: rgba(0, 0, 0, 0.5);  /* Este es el fondo negro transparente que oscurece la imagen, los primeros 3 números son los rgb, y el ultimo es la transparencia, si fuera "0.0" estaría completamente transparente y con "1" completamente negro. */
 }
 
/* 
Esto es para convertir las imágenes cuadradas en circulares.
Si tus imágenes son circulares quita esto de abajo, ya que no lo necesitas xD  */
.imagen img {  
    border-radius: 100%;    
}
 

Revisa si ya estas usando la clase "imagen" en tu css, ese puede ser un problema.

Saludos!

[Jairba]

Hola mardojai,

Mejor explicado imposible y sin embargo no me funciona...

He puesto este código html:
http://imgur.com/bFYQ9sw,VnBarB7#1

Y este CSS:
http://imgur.com/bFYQ9sw,VnBarB7#0

Todo está bien aparentemente. Respecto a la clase imagen, he mirado por el CSS y no la he visto previamente, pero si he visto una clase img, no se si puede ser lo mismo y ocasionar el problema ni como cambiarlo para solucionarlo.

Pero ante todo muchísimas gracias por tu ayuda!

[lauser]

Estas usando wordpres,,,no?... tienes plugins para ello. https://wordpress.org/plugins/img-mouseover/

[Jairba]

Pues creo que no me funciona esto porque lo pongo en el apartado html de mi programa de ftp y está totalmente vacio y según creo para que funcione el código html tiene que haber alguna cosa en el encabezado.

[lauser]

lo pongo en el apartado html de mi programa de ftp y está totalmente vacio

No te entiendo,, que esta vacio?

[Jairba]

Hola Lauser,

Esta vacio el lugar para poner el HTML (o al menos lo que yo entiendo). En la parte de arriba puedo seleccionar el CSS y ahí está todo el código y es donde hago las modificaciones. Pero el HTML está vació.