Фоновый оверлей при зависании

Question

Возможно ли иметь такую ​​разметку, но также и наложение наложения на зависание?

<figure class="gallery-item"> 
    <div class="gallery-icon landscape"> 
     <a href="www.google.com"> 
      <img src="http://placehold.it/300x300" /> 
     </a> 
    </div> 
</figure> 

Я попытался размещения background-color: #333 на .gallery-icon при наведении курсора мыши, но, кажется, только что-то вроде границы дна?

http://codepen.io/filaret/pen/NRpVyr

Answer 1

Вы определенно находитесь на верном пути. Так как вы используете элемент для значка , вы должны оставить этот элемент самостоятельно, так как он уже расположен и определяет его собственную ширину + высоту (основанную на значке).

Причина, по которой правильное позиционирование :after правильно, связано с тем, что оно не зависит от размеров его родительских контейнеров. У вас есть только абсолютное значение сверху и слева, что хорошо. Но он не знает, насколько высок он должен быть, потому что его родитель не имеет определенной высоты! Если вы используете абсолютное позиционирование, вам нужно определить размеры родительских контейнеров, чтобы ребенок знал, где его границы.

Так прежде всего, .gallery-icon уже блочный элемент, так что вам не нужно, чтобы определить его ширину (его уже 100% от природы), только высота:

.gallery-icon { 
    position: relative; 
    height: 100%; 
} 

Во-вторых, вы должны использовать :before элемента для определения фона, так что вам не придется возиться с иконкой :after:

&:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background-color: #333; 
    opacity: 0; 
    transition: opacity 0.3s ease-in-out; 
} 

Теперь, вы просто должны добавить изменения непрозрачности при наведении курсора мыши!

&:hover { 
    .gallery-icon { 
     &:before { 
      opacity: .5; 
     } 
     &:after { 
      opacity: 0.6; 
     } 
    } 

Надежда, что помогает, вот codepen отделилась оригинал: http://codepen.io/anon/pen/JRWqxX

Редактировать: Я также заметил, что ваш img тег, заставляя его идти ниже визуального дна контейнера, быстрое решение просто добавьте:

.gallery-icon { 
    img { 
     display: block; 
    } 

Answer 2

Изображение (http://placehold.it/300x300) имеет сплошной цвет фона, нет?

Это блокирует все, что происходит за собой.

Answer 3

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

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

Использование псевдо элемент для создания фона наложения:

&:hover .gallery-icon { 
    &::before { 
    content: ''; 
    background-color: #333; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    opacity: 0.2; 
    } 
} 

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

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

Answer 4

Я попытался немного упростить код. Надеюсь, это то, чего вы пытались достичь.

Хитрость состоит в том, чтобы разместить a в качестве независимого элемента до img.

<figure class="gallery-item"> 
    <a href="www.google.com"></a> 
    <img src="http://placehold.it/300x300"> 
</figure> 

http://codepen.io/anon/pen/LRWoaR