Conseguir efecto over mouse

[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!