Черный прозрачный наложения на изображения при наведении курсора с помощью CSS?

Я пытаюсь добавить прозрачное черное наложение на изображение всякий раз, когда мышь нависает над изображением только с помощью CSS. Это возможно? Я попробовал это:



http://jsfiddle.net/Zf5am/565/



но я не могу заставить div появиться. 



<div class="image">

    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />

    <div class="overlay" />

</div> 



.image {

  position: relative;

  border: 1px solid black;

  width: 200px;

  height: 200px;

}

.image img {

  max-width: 100%;

  max-height: 100%;

}

.overlay {

  position: absolute;

  top: 0;

  left: 0;

  display: none;

  background-color: red;

  z-index: 200;

}

.overlay:hover {

  display: block;

}
1271   8  

8 ответов:

я бы предложил использовать псевдо-элемент вместо элемента наложения. Потому что псевдо-элементы не могут быть добавлены на заключенный img элементы, вам все равно нужно будет обернуть img элемент хотя.

ЖИВОЙ ПРИМЕР ЗДЕСЬ--ПРИМЕР С ТЕКСТОМ

<div class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

что касается CSS, set необязательные измерения на .image элемент, и относительно его позиции. Если вы стремитесь для отзывчивого изображения просто опустите размеры, и это все равно будет работать (пример). Просто стоит отметить, что размеры должны быть на родительском элементе, а не на элемент посмотреть.

.image {
    position: relative;
    width: 400px;
    height: 400px;
}

отдай ребенка img элемент шириной 100% родителя и добавить vertical-align:top для устранения проблем выравнивания базовой линии по умолчанию.

.image img {
    width: 100%;
    vertical-align: top;
}

что касается псевдо-элемента, установите значение содержимого и абсолютно позиционировать его относительно .image элемент. Ширина/высота 100% будет гарантировать, что это работает с переменным img габариты. Если вы хотите перевести элемент, установите непрозрачность 0 и добавьте свойства/значения перехода.

.image:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

используйте непрозрачность 1 при наведении указателя мыши на псевдо-элемент для облегчения перехода:

.image:hover:after {
    opacity: 1;
}

КОНЕЧНЫЙ РЕЗУЛЬТАТ Здесь

если вы хотите добавить текст при наведении:

для простейшего подхода просто добавьте текст в качестве псевдо-элемента content значение:

ПРИМЕР ЗДЕСЬ

.image:after {
    content: 'Here is some text..';
    color: #fff;

    /* Other styling.. */
}

это должны работа в большинстве случаев, однако, если у вас есть больше чем один img элемент, возможно, вы не хотите, чтобы один и тот же текст появлялся при наведении. Поэтому вы можете установить текст в data-* атрибут и поэтому имеют уникальный текст для каждого img элемент.

ПРИМЕР ЗДЕСЬ

.image:after {
    content: attr(data-content);
    color: #fff;
}

С content стоимостью attr(data-content), псевдо элемент добавляет текст из тега .image элемент :

<div data-content="Text added on hover" class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

вы можете добавить некоторые стиль и сделать что-то вроде этого:

ПРИМЕР ЗДЕСЬ

в приведенном выше примере :after псевдо элемент служит в качестве черного наложения, в то время как :before псевдо элемент-это заголовок / текст. Поскольку элементы не зависят друг от друга, можно использовать отдельные стили для более оптимального позиционирования.

.image:after, .image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:after {
    content: '\A';
    width: 100%; height:100%;
    top: 0; left:0;
    background:rgba(0,0,0,0.6);
}
.image:before {
    content: attr(data-content);
    width: 100%;
    color: #fff;
    z-index: 1;
    bottom: 0;
    padding: 4px 10px;
    text-align: center;
    background: #f00;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
    opacity: 1;
}
187  
2015-07-22 02:32:39

CSS3 filter

хотя эта функция реализована только в webkit, и она не имеет совместимость с браузерами, но стоит взглянуть на:

.image img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: .2s all;
}

.image img:hover {
    -webkit-filter: brightness(50%);
}

JSFiddle Демо

ссылки

похожие темы на так

29  
2017-05-23 15:10:26

Вы были близки. Это будет работать:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); }
.image:hover .overlay { display: block; }

вам нужно поставить :hover на изображение, и сделать .overlay покройте все изображение, добавив right:0; и bottom:0.

jsfiddle: http://jsfiddle.net/Zf5am/569/

9  
2013-08-19 23:33:29

вот хороший способ использования :после на изображении div, вместо дополнительного наложения div:http://jsfiddle.net/Zf5am/576/

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

.image {position:relative; border:1px solid black; width:200px; height:200px;}
.image img {max-width:100%; max-height:100%;}
.image:hover:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}
4  
2013-08-19 23:39:50

.overlay не было высоты или ширины и никакого контента, и вы не можете навести курсор на display:none.

вместо этого я дал div тот же размер и положение, что и .image и изменения RGBA значение на режиме висения.

http://jsfiddle.net/Zf5am/566/

.image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; }
.overlay:hover { background:rgba(255,0,0,.7); }
2  
2013-08-19 23:36:14

вы можете сделать это, играя с непрозрачностью изображения и установив цвет фона изображения на черный. Сделав изображение прозрачным, оно станет темнее.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

CSS:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }

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

1  
2013-08-19 23:46:31

Я бы дал минимальную высоту и минимальную ширину вашему наложению div размера изображения и изменил цвет фона при наведении

.overlay { position: absolute; top: 0; left: 0;  z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}
0  
2013-08-19 23:38:00

смотрите, что я здесь сделал:http://jsfiddle.net/dyarbrough93/c8wEC/

во-первых, вы никогда не устанавливали размеры наложения, то есть он не показывался в первую очередь. Во-вторых, я рекомендую просто изменить Z-индекс слоя при наведении курсора на изображение. Измените непрозрачность / цвет наложения в соответствии с вашими потребностями. 

.image { position: relative; width: 200px; height: 200px;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5}
.image:hover .overlay { z-index: 10}
0  
2013-08-19 23:41:55

Comments

    Ничего не найдено.
Click here to cancel reply.