css - transicion - mostrar texto al pasar el mouse sobre una imagen html

Resalte las imágenes(al pasar el mouse sobre cualquier fondo)

Question

Es bastante común querer que ciertas imágenes se enciendan (aumenten el brillo) cuando el puntero del mouse se desplaza sobre ellas.

Una técnica que conozco, que funciona en fondos blancos es reducir la opacidad en el vuelo estacionario, que en efecto aumenta el brillo dejando pasar más blanco. El problema es obviamente que solo funcionará en un fondo blanco.

¿Hay algún CSS que pueda agregar a mis imágenes?

a. Agregue un fondo blanco a las imágenes que se ajuste exactamente, de modo que el mismo efecto de iluminación tenga lugar en cualquier fondo de color, o

segundo. Logre el mismo efecto sin agregar fondos blancos o usar opacidad en absoluto

Answer 1

¿Algo como esto funcionaría para ti? http://jsfiddle.net/omegaiori/teAP7/1/

para que esto funcione, debes envolver tu imagen en un div

 .img-cont {
background:white;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
margin:30px auto 0;
width:300px;
}

y tiene el width su imagen establecido en 100%

puede cambiar el valor de padding como desee, el cuadro siempre tendrá el mismo tamaño gracias a su tamaño de box-sizing

Answer 2

Agrega esta clase a cualquier imagen

.image-hover-highlight {
-webkit-transition: all 0.50s;
transition: all 0.50s;
&:hover {
border: 1px solid gray;
filter: brightness(130%);
-webkit-filter: brightness(130%);
-moz-filter: brightness(130%);
-o-filter: brightness(130%);
-ms-filter: brightness(130%);
-webkit-transition: all 0.50s;
transition: all 0.50s;
}
}

Answer 3

encapsule su imagen con un div

<div class="brightness">
<img src="test.jpg">
</div>

y aplicar el buen css:

.brightness {
background-color: white;
display: inline-block;
}
.brightness img:hover {
opacity: .5;
}

violín: http://jsfiddle.net/5yush/

Answer 4

image:hover { filter: brightness(50%); }