Затенение фонового изображения при наведении

Ответ 1

Как насчет этого, используя оверлей?

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

Демо

Ответ 2

Похоже, но опять же немного по-другому.

Сделайте изображение на 100% непрозрачным, чтобы оно было четким. А затем на img hover уменьшите его до непрозрачности, которую вы хотите. В этом примере я также добавил ослабление для хорошего перехода.

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;
}

Это поможет, надеюсь, это поможет.

Спасибо Роберт Байерс за ваше выступление

Ответ 3

Если вы хотите затемнить изображение, используйте элемент наложения с rgba и opacity свойствами, которые затемнят ваше изображение...

Демо

<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;
}

Примечание. Я также использую переходы CSS3 для плавного темного эффекта

Если кто-нибудь сохранит дополнительный элемент в DOM, вы можете использовать псевдоним :before или :after..

Демо 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;
}

Использование некоторого содержимого поверх затемненного наложения изображения

Здесь я использую методы CSS-позиционирования с z-index для наложения содержимого поверх затемненного элемента div. Демо 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;
}

Ответ 4

Вы можете использовать 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

Ответ 5

Добавить css:

.image{
    opacity:.5;
}

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

Ответ 6

попробуйте это

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>

Ответ 7

Попробуйте выполнить следующий код:

.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;
}

Ответ 8

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

}

Вы получите темнее

Ответ 9

Самый простой способ сделать это, не добавляя дополнительный элемент оверлея или используя два изображения, - это использовать: до или: после селектора.

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

Конечно, это не будет работать в старых браузерах; просто скажите, что он изящно деградирует!

Ответ 10

Если вам нужно использовать текущее изображение и получить более темное изображение, вам нужно создать новый. Кроме того, вы можете просто уменьшить непрозрачность класса .image и в .image: hover вы можете поместить более высокое значение для непрозрачности. Но тогда изображение без зависания выглядело бы бледным.

Лучшим способом было бы создать два изображения и добавить следующее:

.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');
}
}

Ответ 11

Я бы добавил div вокруг изображения и сделал изменение изображения в непрозрачности при наведении и добавил тень вставки в div на hover.

img:hover{
    opacity:.5;
}
.image:hover{
    box-shadow: inset 10px 10px 100px 100px #000;
}

<div class="image"><img src="image.jpg" /></div>

Ответ 12

Вы можете использовать это:

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

как видно на: fooobar.com/questions/52019/...

Ответ 13

Просто попробуйте этот код.

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;
}