Как разместить цветную обложку поверх изображения в CSS

Question

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

Как я мог понять это с помощью чистого CSS?

<div class="col-xs-3"> 
    <h1>Some title here</h1> 
    <img src="the_image.png" height: "100px", width: "100px"> 
    <p>Some text here...</p> 
</div> 

Answer 1

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

http://jsfiddle.net/charly3176/Sf97g/

<div class="col-xs-3"> 
    <h1>Some title here</h1> 
    <div class="background"> 
     <img src="the_image.png"> 
    </div> 

    <p>Some text here...</p> 
</div> 


.background { 
    width:300px; 
    height:300px; 
    background-color: blue; 
} 

img:hover { 
    opacity:.3; 
} 

Answer 2

Я не знаю, что именно вы собираетесь, но here is an example.

#cat { 
    background: url(http://www.funnycatsite.com/pictures/Do_Not_Turn_The_Water_On.jpg); 
    height: 400px; 
    width: 400px; 
} 
#cat:hover { 
    background: blue; 
} 

Answer 3

Если вы можете использовать CSS3, попробуйте CSS:filter анс специально -webkit-filter
^{(Это не решение полностью кросс-браузер ... все же!)}

img:hover { 
     -webkit-filter: hue-rotate(240deg) saturate(3.3); 
    } 

Здесь есть Fe ж онлайн демки:

• CSS Filter Effects
• Say Hello to Webkit Filters
• More on google...

Надеются, что это поможет .. или хотя бы направить вас в правильном направлении.

Source