Наложение цвета на изображение

Question

Могу ли я добавить наложенный цвет, как только кто-то наведет над изображением/div в этом конкретном случае? Прямо сейчас я показываю изображение на 80%, и как только кто-то на него нависает, он отображает на 100%, чтобы создать эффект. Изображение/фон в вопросе является частью спрайта:

<div class="main"> 
    <a class="thumb" style="background: url(image.png) -150px 0;" href="url"></a> 
    <div class="title"> 
     <a href="url">Text</a> 
    </div> 
</div> 

И CSS:

.thumb { 
    display: block; 
    background-repeat:no-repeat; 
    height: 75px; 
    width: 150px; 
    opacity:0.8; 
    filter:alpha(opacity=80); 
} 
a.thumb:hover { 
    opacity:1.0; 
    filter:alpha(opacity=100); 
} 

Answer 1

Вы можете использовать псевдо класс, который занимает высоту и ширину элемента, а только показывает, когда элемент завис.

Используйте rgba(), чтобы получить полупрозрачный цвет. Соответственно отрегулируйте значения RGB.

Обратите внимание на позицию relative, которую я дал .thumb, для обеспечения того, что псевдоэлемент абсолютно расположен относительно его родителя.

.thumb { 
 
    position:relative; 
 
    display: block; 
 
    background-repeat:no-repeat; 
 
    height: 75px; 
 
    width: 150px; 
 
    opacity:0.8; 
 
    filter:alpha(opacity=80); 
 
    position:relative; 
 
} 
 
a.thumb:hover { 
 
    opacity:1.0; 
 
    filter:alpha(opacity=100); 
 
} 
 
a.thumb:hover:after { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    display:block; 
 
    content:''; 
 
    background:rgba(255, 0, 0, 0.3); 
 
}

<div class="main"> 
 
    <a class="thumb" style="background: url(http://i.stack.imgur.com/KmG7H.png) -150px 0;" href="url"></a> 
 
    <div class="title"> 
 
     <a href="url">Text</a> 
 
    </div> 
 
</div>

Answer 2

Я думаю, что есть два пути вы можете пойти. Первый: создайте div с некоторым backgroud-цветом, который накладывает на вас изображение. По умолчанию этот div имеет нулевую непрозрачность, при наведении его больше.

Или вы можете рассмотреть возможность использования Blend-режимов, описывает here.

Answer 3

Это можно сделать несколько способов, но вы можете просто обернуть его в с цветом фона и установить видимость: скрытые на картинке: парить

HTML:

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

CSS

div { background: red; display: inline-block; } 
    img { display: block; } 
    div:hover img { visibility: hidden; } 

Answer 4

Я не совсем уверен, что вы хотите, но я думаю, это так.

div { 
 
    position: relative; 
 
    display: block; 
 
    width: 150px; 
 
    height: 75px; 
 
} 
 

 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 150px; 
 
    height: 75px; 
 
    z-index: 1; 
 
    background-color: rgba(255,0,0,.2); 
 
    transition: 1s all; 
 
} 
 
div:hover:after { 
 
    background-color: rgba(255,0,0,0); 
 
}

<div><img src="http://www.burrenbeo.com/sites/default/files/imagecache/short/images/Spring_gentian.jpg" /></div>