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.
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)
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" />
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" />
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>
Related
When I change blur filter, image trembles a little bit.
Here is demo at jsfiddle. Please click twice on button at demo
body {
background-color: #000;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
z-index: -1;
background: url(https://static01.nyt.com/newsgraphics/2017/12/26/2018-1-olympics-climate/assets/images/469466931-1254.jpg) center no-repeat;
background-size: cover;
transition: filter 2s;
}
body.blurred::before {
filter: blur(30px);
}
I am using Chrome 63.0.3239.84 on Mac with non-Retina display.
I see many similar question, but no one answer helps me
image moves on hover - chrome opacity issue
CSS transition effect makes image blurry / moves image 1px, in Chrome?
I cheated problem using transition by steps, not smoothly
transition-timing-function: steps(10, end);
It is not a solving, it is a cheating and can be applied not everywhere.
I can't explain it, but it works for me.
https://jsfiddle.net/tuzae6a9/6/
How do I take a image with just white and transparent pixels (example) and recolor to, say, red or orange, using only CSS?
Question below was asked previously -
Change color of PNG image via CSS?
The answer says to use filters, but does not indicate what combination of filters would make it work. Are there any filter combinations that would allow me to change a white-on-transparent image to red?
To clarify: I would like to recolor the white portion of the image, not color the background. For example, I would like it red-on-transparent.
img {
-webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>
I played around a bit and found a possible solution to only paint the white parts:
img {
display: block;
background: black;
-webkit-filter: brightness(.5);
}
.recolor {
position: relative;
display: inline-block;
-webkit-filter: brightness(1) contrast(300%) invert(1);
}
.recolor:after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 255, 255, 0.3);
}
<figure class="recolor">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png">
</figure>
How it works:
Make image background black and set its brightness to a half, to make the foreground gray
Create a wrapper element (<figure>) and create an overlay (:after) of the inverted color you wish with a relatively low opacity
Now filter the wrapper element: make it so bright with such high contrast, that the background becomes black, but the foreground color remains.
Now just invert the wrapper to get your foreground color on white
Limits: Transparency gets lost, due to filtering the colors are maybe not exactly the colors you want, browser support is not optimal
Just give background color to image, For Example below.
Use this image
NOTE: Image is transparent
CSS
img{
background-color: red;
}
HTML
<img src="test.png">
It IS possible to "colorise" a white image using filters but the results are imperfect.
The first step is a sepia filter and then a hue-rotate.
A true "Red" may be harder to achieve but you can play with this further.
img {
max-height: 100vh;
width: auto;
-webkit-filter:
sepia(100%)
saturate(2000%)
hue-rotate(222deg);
}
body {
background: green;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>
How do I add an color overlay or maybe an opacity drop the the images on a wordpress homepage - they have a color overlay on hover - but I want them to be darker in the picture color, as I am trying to go with a dark theme.
As you can see on the left one - I have toned it down a little in photoshop, whereas the right image is how they normally look.
Is there a way to do this rather then possibly toning down every image via photoshop before I upload?
You can wrap the image in a container with the same size and change the opacity of the image, while the wrapper has a dark background color. It might be problematic in IE8.
div {
width: 400px;
height: 200px;
background-color: #1b1b1b;
}
img {
opacity: 0.5;
transition: opacity 0.25s;
}
img:hover {
opacity: 1;
}
<div>
<img src="http://lorempixel.com/400/200/" alt="img"/>
</div>
I am trying to do a simple image fade on rollover - works fine and smooth in Chrome, but Firefox is a bit jumpy. I've tried doing the backface-visibility trick on the container, but still no luck.
Anyone have any ideas?
JSFiddle
HTML
<div class="link-box large">
<div class="image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRStwH3maKRqLU8lLOo1XbO6uZIKHRyf2PGv66H6ol5mB0kS_0r" alt="">
</div>
</div>
CSS
.link-box .image img { transition: all .2s ease-out; width:200px; }
.link-box.large { position: relative;}
.link-box.large:hover .image img { opacity: .65; }
My best guess is that setting the width of the image to 200px and leaving the height unspecified is causing the browser to calculate the height of the image. If the height calculates to a nice whole number it isn't an issue. If the height calculates to a decimal it may be the cause of the problem.
In this case the natural dimensions of the image are 275px by 183px.
By changing the width of the image to 200px you are shrinking the image to 72.727272...% of its natural size.
275/200 = 0.727272... Or if you prefer fractions: 275(8/11) = 200
Now running the same equation on the height yields:
183(8/11) = 133.090909...
It looks like, under the normal run of things, the partial pixels are cropped, but during the transition the partial pixels aren't being cropped, and the image is warped slightly to show the partial pixels within the same height.
Cropped down to 133px:
Not cropped and slightly warped:
Now that we have a good hypothesis on what's causing the problem, on to the solutions:
You can hard code the height of the image:
Working Example
.link-box .image img {
transition: all .2s ease-out;
width:200px;
height: 133px; /* manually set the height */
}
Or if you would rather not hard code the height, you can also fix the issue with an anti-alias hack, just add a box-shadow.
Working Example
.link-box.large:hover .image img {
opacity: .65;
box-shadow: 0 0 0 #000; /* add a non-visible box-shadow */
}
Or if you're concerned about the cross-browser compatibility of using a box-shadow, you can also use a transparent border:
Working Example
.link-box .image img {
transition: all .2s ease-out;
width:200px;
border: 1px solid transparent; /* add transparent border */
}
Works good on my Firefox.
Anyway you can try to add some special attributes that will prepare the browser for the transition and actually render the element with possible transformation in mind.
Such an attribute is transform: translate3d(0,0,0);
Like this :
.link-box .image img {
transition: all .2s ease-out;
width:200px;
transform: translate3d(0,0,0);
}
.link-box.large { position: relative;}
.link-box.large:hover .image img { opacity: .65; }
I have two images in an HTML page. One is black-and-white, the other is color. I would like to transition from the black-and-white image to the color image using a custom animation. The effect I'm looking for is where the image appears black-and-white, and then appears to be "painted" in color, stroke-by-stroke.
The easiest way I can think to do this is to create an animated gif that starts white and gets painted black, stroke-by-stroke. Then I could place the color image on top of the black-and-white image using absolute positioning and mask the color image with the animated gif.
However, before pursuing that I searched all over to see if anyone had ever done anything like that, and I've been unable to turn up any examples. Is that even possible, and can you show an example of it?
Or, is there a better way to achieve this effect?
If you have just two images then cross fading two overlayed images is pretty simple
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
Look here at demo 3 & 4 http://css3.bradshawenterprises.com/cfimg/
I have done half of the work for you
for this html
<id class="base">
</id>
and this CSS
.base {
width: 200px;
height: 200px;
border: solid 1px black;
position: absolute;
}
.base:before, .base:after {
background-image: url("http://placekitten.com/200/300");
width: 100%;
height: 100%;
position: absolute;
content: '';
}
.base:after {
-webkit-filter: grayscale(1);
-webkit-mask-size: 200px 200px;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 70px, rgba(0, 0, 0, 0) 80px);
}
You get (in 2 pseudo elements) the original image and the image turned in grayscale. (You need a webkit browser for this).
Then , the grayscale image is turned transparent with an mask file.
I don't have any gif with transparencies, so I can not test the final result, but I think that it should work. (Just change .webkit-mask-image to url(gif)
Share your result if it works !
demo
And yes, it is a overkill, but once you get it working you can adapt with no work to another image !
updated demo with an animated gif as mask