2016-12-20 5 views
0

Я пытаюсь получить прозрачную черную накладку появляться при наведении курсора на изображение на этой странице:CSS накладываемого изображения не работают

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

.photo-gallery div { 
 
    display: inline-block; 
 
    margin: 1%; 
 
    width: 31%; 
 
    position: relative; 
 
} 
 
.photo-gallery div a { 
 
    line-height: 0; 
 
    display: block; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    z-index: 200; 
 
    width: 90%; 
 
    height: 90%; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: none; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
} 
 
.photo-gallery div a:hover .overlay { 
 
    display: block; 
 
}

ответ

1

.photo-gallery a {position: relative} 
 
.photo-gallery a:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    transition: background-color 0.4s; 
 
} 
 
.photo-gallery a:hover:after { 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
}

+0

Это хорошо работает. Как мне добавить добавление% отложения вокруг наложения? – user1110562

+0

ididn't получить вас –

+0

сделать так, чтобы я мог попробовать nd, дайте знать –

0

Возможное решение было бы установить черный фон и изменить непрозрачность изображения на зависания

a { 
 
    background:black; 
 
    display:inline-block; 
 
} 
 
img:hover { 
 
    opacity:0.5; 
 
}
<a href="#"><img src="http://www.samanthamakeup.tv/_img/_photo-gallery/gallery-02.jpg"/></a>

0

Вы можете использовать черный фон для элемента 'a', а затем добавить непрозрачность изображения при наведении указателя мыши.

Что-то вроде этого:

.photo-gallery div a { 
    background-color:black; 
} 

.photo-gallery div a img:hover{ 
    opacity:0.8; 
} 
+0

Почти ответ на мой ответ – rekire

0

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

a { 
 
    display:inline-block; 
 
    position: relative; 
 
} 
 

 
a:hover:after { 
 
    content: ""; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: rgba(0,0,0,.7); 
 
} 
 

 
a img { 
 
    vertical-align: middle; 
 
}
<a href="#"> 
 
    <img src="http://www.samanthamakeup.tv/_img/_photo-gallery/gallery-02.jpg"/> 
 
</a>