html - para - oscurecer imagen css

Oscurecer la imagen de fondo en el hover

Question

¿Cómo oscurecería una imagen de fondo al desplazarme sin crear una nueva imagen más oscura?

CSS:

.image {
background: url(''http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png'');
width: 58px;
height: 58px;
}

Enlace de JSFiddle: http://jsfiddle.net/qrmqM/1/

Answer 1

¿Qué tal esto, usando una superposición?

.image:hover > .overlay {
width:100%;
height:100%;
position:absolute;
background-color:#000;
opacity:0.5;
border-radius:30px;
}

Demo

Answer 2

Añadir css:

.image{
opacity:.5;
}
.image:hover{
// CSS properties
opacity:1;
}

Answer 3

Intenta seguir el siguiente código:

.image {
background: url(''http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png'');
width: 58px;
height: 58px;
opacity:0.2;
}
.image:hover{
opacity:1;
}

Answer 4

La forma más sencilla de hacerlo sin agregar un elemento de superposición adicional, o usar dos imágenes, es usar el selector: antes o después.

.image {
position: relative;
}
.image:hover:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
top: 0;
left:0;
}

Esto no funcionará en navegadores más antiguos, por supuesto; Solo di que se degrada con gracia!

Answer 5

Me gustaría agregar un div alrededor de la imagen y hacer que la imagen cambie en opacidad al desplazarse y agregar una sombra de recuadro insertada al div al activarse.

img:hover{
opacity:.5;
}
.image:hover{
box-shadow: inset 10px 10px 100px 100px #000;
}
<div class="image"><img src="image.jpg" /></div>

Answer 6

Puedes usar la opacity :

.image {
background: url(''http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png'');
width: 58px;
height: 58px;
opacity:0.5;
}
.image:hover{
opacity:1;
}

JSFiddle

Answer 7

Si desea oscurecer la imagen, use un elemento de superposición con rgba y propiedades de opacity que oscurecerán su imagen ...

Demo

<div><span></span></div>
div {
background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
height: 400px;
width: 400px;
}
div span {
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: rgba(0,0,0,.5);
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
div:hover span {
opacity: 1;
}

Nota: También estoy usando transiciones CSS3 para un efecto de oscuridad suave

Si hay alguien que guarde un elemento adicional en el DOM que pueda usar :before o :after pseudo también ..

Demo 2

div {
background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
height: 400px;
width: 400px;
}
div:after {
content: "";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: rgba(0,0,0,.5);
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
div:hover:after {
opacity: 1;
}

Uso de algún contenido sobre la superposición oscura de la imagen.

Aquí estoy usando técnicas de posicionamiento CSS con z-index para superponer contenido sobre el elemento div oscurecido. Demo 3

div {
background-image: url(http://im.tech2.in.com/gallery/2012/dec/stockimage_070930177527_640x360.jpg);
height: 400px;
width: 400px;
position: relative;
}
div:after {
content: "";
display: block;
height: 100%;
width: 100%;
opacity: 0;
background: rgba(0,0,0,.5);
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
div:hover:after {
opacity: 1;
}
div p {
color: #fff;
z-index: 1;
position: relative;
}

Answer 8

Si tiene que usar la imagen actual y obtener una imagen más oscura, entonces necesita crear una nueva. De lo contrario, puede simplemente reducir la opacidad de la clase .imagen y en la imagen .puede colocar un valor más alto para opacidad. Pero entonces la imagen sin flotar quedaría pálida.

La mejor manera sería crear dos imágenes y agregar lo siguiente:

.image {
background: url(''http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png'');
width: 58px;
height: 58px;
opacity:0.9;
}
.image:hover{
background: url(''http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook_hover.png'');
}
}

Answer 9

Similar, pero de nuevo un poco diferente.

Haz la imagen 100% opacidad para que quede clara. Y luego en img hover, redúzcalo a la opacidad que desee.

img {
-webkit-filter: brightness(100%);
}
img:hover {
-webkit-filter: brightness(70%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

Eso lo hará, espero que ayude.

Gracias Robert Byers por tu jsfiddle

Answer 10

Solo prueba este código.

img:hover
{
box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset;
-webkit-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset;
-moz-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset;
-o-box-shadow: 0 25px 50px -25px rgba(0, 0, 0, .5) inset;
}

Answer 11

prueba esto

http://jsfiddle.net/qrmqM/6/

CSS

.image {
background: url(''http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png'');
width: 58px;
height: 58px;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.image:hover{
background: url(''http://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/facebook.png'');
width: 58px;
height: 58px;
border-radius:100px;
opacity:1;
filter:alpha(opacity=100);
}

HTML

<div class="image"></div>

Answer 12

.image:hover {
background: #000;
width: 58px;
height: 58px;
border-radius:60px;
}

Te oscureceras