Получение цвета фона в верхней части изображения

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

Html

<div class="overlay"> 
    <div class="overlay2"></div> 
    <figure class="box-img"> 
     <img src="http://i.imgur.com/PHKC3T9.jpg" alt="" /> 
    </figure> 
    </div>

CSS

.overlay:hover{ 
background: red; 
position: absolute; 
opacity: 0.7; 
} 

.box-img img{ 
position: relative; 
}

Вот jsfiddle: JSFIDDLE

источник

2015-04-18 Chibi

большая 'граница' из-за края по умолчанию и обивке в figure элемента, в соответствии с W3 - это общие характеристики:

figure { 
display: block; 
margin-top: 1em; 
margin-bottom: 1em; 
margin-left: 40px; 
margin-right: 40px; 
}

Я всегда хотел сделать полный сброс себя в начале таблицы стилей:

*, *:before, *:after { 
margin: 0; 
padding: 0; 
}

В текущем виде кода, наложение не будет отображаться на вершине, хотя, потому что цвет будет в фон.Псевдо элемент может делать то, что вы после этого (обновленный код здесь с прямым подходом):

http://jsfiddle.net/j0qfhr9e/

<figure class="box-img"> 
    <img src="http://i.imgur.com/PHKC3T9.jpg" alt="" /> 
</figure>

.box-img { 
display: inline-block; 
position: relative; 
line-height: 0; 
} 

.box-img:hover:after { 
content: ''; 
width: 100%; 
height: 100%; 
background: red; 
position: absolute; 
top: 0; 
left: 0; 
opacity: 0.7; 
}

Первый проект для полноты, ближе к оригиналу разметка:

http://jsfiddle.net/rLu2c4kr/

источник

2015-04-18 21:29:27 Shikkediel

совет: проверьте 'нормализованное CSS' в опциях скрипку для сброса стилей. И +1 для использования псевдоэлемента, вы избили меня до него ;-) http://jsfiddle.net/zgw5tmrc/2/ Обратите внимание, что вы также можете использовать ': before', но тогда вам нужно будет добавить z -index, как я это сделал в своей скрипке – Pevara

Спасибо за подсказку, я с радостью позволю вам победить меня до следующего, когда дело дойдет до использования псевдо. :-D – Shikkediel

Хорошее решение, простое и эффективное. Меньше разметки +1 –

Другая альтернатива, чтобы сделать эту работу без класса псевдо, как @Shikkediel упоминалось вы можете установить может использовать фоновое изображение вместо тега изображения http://jsfiddle.net/zgw5tmrc/3/

body, figure { 
 
    padding:0; 
 
    margin: 0; 
 
} 
 
.box-img { 
 
    position: relative; 
 
    height: 300px; 
 
    width: 300px; 
 
    background: url('http://i.imgur.com/PHKC3T9.jpg'); 
 
    background-size: cover; 
 
} 
 

 
.box-img:hover .overlay{ 
 
    position: absolute; 
 
    background: red; 
 
    width: 100%; 
 
    top:0; 
 
    bottom:0; 
 
    left: 0; 
 
    right:0; 
 
    opacity: .7; 
 
}

<figure class="box-img"> 
 
    <div class="overlay"></div> 
 
</figure>

источник

2015-04-18 21:49:41 Enjayy

figure { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
img { 
 
    display:block; 
 
} 
 
figure:hover::before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom:0; 
 
    background: red; 
 
    opacity: 0.7; 
 
}

<figure> 
 
    <img src="http://i.imgur.com/PHKC3T9.jpg" alt="" /> 
 
</figure>

источник

2015-04-18 22:14:59

Перестройте свою разметку таким образом (Вот JSFIDDLE)

HTML

<div class="overlay-container"> 
    <div class="overlay"> </div> 
    <figure class="box-img"> 
     <img src="http://i.imgur.com/PHKC3T9.jpg" alt="" /> 
    </figure> 
</div>

CSS

.overlay-container { 
    width:225px; 
    height:225px; 
    position: relative; 
} 
.overlay-container:hover .overlay{ 
    background: red; 
    position: absolute; 
    opacity: 0.7; 
    z-index:1; 
    width: 100%; 
    height: 100%; 
    margin-left: 40px; 
} 
.box-img img{ 
    position: relative; 
}

Вот JSFIDDLE

источник

2015-04-18 22:43:07

Получение цвета фона в верхней части изображения

ответ

Смежные вопросы