8

I'm trying to create a hover-over effect where an image starts off and in full colour, and when I hover-over the image, I'd like it to have a blue overlay.

The thing is, with just a simple blue overlay, it's just putting a semi-transparent block of blue atop of a colour image... which means other colours are showing through a little. What I'd like is for the image to simply be shades of blue.

Now, I've managed to get an image to go grayscale, and I've managed to get a blue overlay, but is there any way to get CSS to stack the effects? Turn the image greyscale, then multiply the colour over it.

The easier way is likely to just create the effect as a raster image and then just have it change images, but it'd be nice if it could be done in code, instead.

ZippoS
  • 81
  • 1
  • 2

4 Answers4

3

I think you're looking for CSS filter property. See David Walshe's demo here : http://davidwalsh.name/demo/css-filters.php

It's currently experimental and only supported by Webkit I think, but it's the only way to achieve that with CSS.

You can also take a look to Adobe CSS custom filters : http://html.adobe.com/webplatform/graphics/customfilters/cssfilterlab/

A demo of something I think you wanna do : http://jsbin.com/igahay/3011/ (from this topic: CSS image overlay with color and transparency)

Community
  • 1
  • 1
enguerranws
  • 8,087
  • 8
  • 49
  • 97
  • Hmm, the example on http://jsbin.com/igahay/3011 is similar to what I want to do, only it's only doing a colour overlay... For example, the top-right image, which overlays with a blue colour. You can still see hues of green showing through. What I'd like to do is more like this: http://i.imgur.com/RvynvTn.jpg – ZippoS Mar 03 '14 at 18:11
  • @zippo ... and you can do that with custom filters, just experiment a little. – slynagh Mar 04 '14 at 00:55
  • You have to put a grayscale filter on the original image, and use a blue overlay. – enguerranws Mar 04 '14 at 10:59
1

Single image and css filters (if you are satisfied with the result):

  img.front { position: relative; opacity: 0; transition-property: opacity; transition-duration: 0.5s; }
  img.front:hover { opacity: 1; }
  img.back { position: absolute; -webkit-filter: sepia(100%) hue-rotate(180deg) saturate(300%); }
<img class="back" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />
<img class="front" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />
Costas
  • 171
  • 2
  • 4
  • Nice combination of `sepia` and `hue-rotate`. I was wondering why `sepia` didn't take an optional color to, ah, sepiate into. – Ulrich Schwarz Nov 07 '14 at 17:07
0

Using two images will give you much more flexibility as to the possible effects, transitions etc.

I'd use this:

img.front { 
  position: relative; 
  opacity: 0; 
  transition-property: opacity; 
  transition-duration: 1s; 
}

img.front:hover { 
  opacity: 1; 
}

img.back { 
  position: absolute; 
}
<img class="back" src="https://lh5.googleusercontent.com/-uM248yE5o9M/VFzw11HH-GI/AAAAAAAAJ5c/KrG1kM7XCsc/w400-h225-no/image-b.jpg" />
<img class="front" src="https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg" />
Costas
  • 171
  • 2
  • 4
  • The only problem here is that you've doubled the data size – jbutler483 Nov 07 '14 at 16:25
  • If you can use a number of css filters to alter the image, then the data size will be the same - just apply the filters to the back or front image and use the same url. Unless your images are huge though, I'd use the two image solution, as it is way more flexible. Css filters do not cover all the possibilities. Imagine for example trying to add a spot light or a flare effect over the picture etc. Possible, but I'm lazy and I prefer two pictures :) – Costas Nov 07 '14 at 16:47
  • it would be more when you're paying for cloud storage by the MB that it starts to get... tender. – jbutler483 Nov 07 '14 at 17:00
0

I'm sure there are better ways to solve this, but if you want a color overlay over a grayscale image, you could desaturate a background image and use a pseudo element to create an overlay:

#img1{
  width: 400px;
  height: 200px;  
  background-color: rgba(15,192,252,0.5); 
  background-image: linear-gradient(black, black), url(https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg);
  background-size: 100%;
  background-blend-mode: saturation;
  transition: 0.5s;
}
#img1:before{
  content: "";
  display: block;
  position: absolute;   
  width: inherit;
  height: inherit;
  background-color: inherit;
  opacity: 0.4;  
}
#img1:hover{
  background-color: transparent;
  background-image: url(https://lh4.googleusercontent.com/-g4UhBKn4KKk/VFzw16RyQQI/AAAAAAAAJ5g/RybFWXp9YXc/w400-h225-no/image-f.jpg);
}
<div id="img1">
  <div>
aYo11
  • 1