Geek Answers Handbook

Html - grayscale + color overlay

I am trying to create a freezing effect when the image starts and is full, and when I hover over the image, I would like it to have a blue overlay.

The thing is, with a simple blue overlay, it just superimposes a translucent block of blue on the color image ... which means that other colors appear a little. I would like the image to just be a blue tint.

Now I managed to get the image to go in grayscale, and I managed to get the blue overlay, but is there a way to get CSS to style the effects? Rotate the image in shades of gray, then multiply the color by it.

An easier way is to simply create the effect as a bitmap and then just change it, but it would be nice if it could be done in code.

+8
html css
source share
4 answers

I think you are looking for the CSS filter property . See the David Walsh demo here: http://davidwalsh.name/demo/css-filters.php

It is currently experimental and supported only by Webkit, but this is the only way to achieve this using CSS.

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

Demonstration of something that I think you want to do : http://jsbin.com/igahay/3011/ (from this topic: Overlay CSS images with color and transparency )

+3
source share

Filters with one image and css (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" />
+1
source share

Using two images will give you much more flexibility regarding possible effects, transitions, etc.

I would 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" />
0
source share

I'm sure there are more efficient ways to solve this problem, but if you want to overlay the color on top of the grayscale image, you can bleach the background image and use the pseudo-element to create the 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>

0
source share

More articles:


All Articles