Oscurecer la imagen de fondo en el cursor
¿Cómo puedo oscurecer un imagen de fondo on hover sin hacer 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 JSFiddle: http://jsfiddle.net/qrmqM/1/
12 answers
¿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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-05 05:31:29
Similar, pero de nuevo un poco diferente.
Haga que la imagen sea 100% opacidad para que quede clara. Y luego en img hover reducirlo a la opacidad que desea.
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 eso ayude.
Gracias Robert Byers por su jsfiddle
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-10 09:47:30
Si desea oscurecer la imagen, utilice un elemento de superposición con las propiedades rgba
y opacity
que oscurecerán la 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 oscuro suave
Si alguien quiere guardar un elemento extra en el DOM, puede 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;
}
Usando algún contenido sobre la superposición oscurecida 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-02 11:45:19
Puedes usar opacidad :
.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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-05 05:30:23
Añadir css:
.image{
opacity:.5;
}
.image:hover{
// CSS properties
opacity:1;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-05 05:29:21
Prueba esto
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-05 05:31:24
Intente 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-05 05:37:06
.image:hover {
background: #000;
width: 58px;
height: 58px;
border-radius:60px;
}
Te oscurecerás
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-05 05:34:24
La forma más sencilla de hacerlo sin agregar un elemento de superposición adicional, o usar dos imágenes, es usar el selector :before o :after.
.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 antiguos, por supuesto; ¡solo di que se degrada con gracia!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-04 11:47:47
Si tiene que usar la imagen actual y obtener una imagen más oscura, entonces necesita crear una nueva. De lo contrario, simplemente puede reducir la opacidad de la .clase de imagen y el en el .imagen: hover puede poner un valor más alto para la opacidad. Pero entonces la imagen sin flotar se verí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');
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-05 05:48:58
Agregaría un div alrededor de la imagen y haría que la imagen cambiara en opacidad al flotar y agregaría una sombra de recuadro al div al flotar.
img:hover{
opacity:.5;
}
.image:hover{
box-shadow: inset 10px 10px 100px 100px #000;
}
<div class="image"><img src="image.jpg" /></div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-02 23:15:22
Simplemente 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-23 14:42:33