How to place a color cover on top of an image in CSS

Question

I want to be able to cover an image with blue colour when I hover on top of it.

How could I implement this with pure 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>

score 3 · Answer 1 · answered Feb 10 '14 at 22:46

3

I dunno exactly what you're going for, but 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;
}

answered Feb 10 '14 at 22:46

dezman

18,087
10
53
91

score 1 · Accepted Answer · answered Feb 10 '14 at 23:14

If you don´t want to use a background image and want to have a full browser support you can do it this way. And you can use opacity.

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;
}

That was exactly the effect i was looking for. Thanks! – user3075049 Feb 11 '14 at 16:13 — user3075049, Feb 11 '14 at 16:13

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

If you can use CSS3, try with CSS:filter ans specially -webkit-filter
^{(It's not a fully cross-browser solution... yet!)}

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

Here you have a few online demos:

Hope it's help.. or at least point you in the right direction.

Source

edited May 23 '17 at 12:05

Community

1
1

answered Feb 10 '14 at 22:46

malta

858
1
9
17

How to place a color cover on top of an image in CSS

3 Answers3