It is quite common to want certain images to be lit up (increase brightness) when your mouse pointer hovers over them.
One technique that I know of, that works on white backgrounds is to reduce opacity on hover, which in effect increases brightness by letting more white through. The problem is obviously that it will only work on a white background.
Is there any CSS that I can add to my images that will either
a. Add a white background to the images which fits exactly, so that the same light-up effect will take place on any color background, or
b. Achieve the same effect without adding white backgrounds or using opacity at all
encapsule your image with a div
<div class="brightness">
<img src="test.jpg">
</div>
and apply the good css :
.brightness {
background-color: white;
display: inline-block;
}
.brightness img:hover {
opacity: .5;
}
fiddle: http://jsfiddle.net/5yush/
image:hover { filter: brightness(50%); }
Add this class to any image
.image-hover-highlight {
-webkit-transition: all 0.50s;
transition: all 0.50s;
&:hover {
border: 1px solid gray;
filter: brightness(130%);
-webkit-filter: brightness(130%);
-moz-filter: brightness(130%);
-o-filter: brightness(130%);
-ms-filter: brightness(130%);
-webkit-transition: all 0.50s;
transition: all 0.50s;
}
}
would something like this work for you? http://jsfiddle.net/omegaiori/teAP7/1/
in order to have this working you have to wrap your image in a div
.img-cont {
background:white;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
margin:30px auto 0;
width:300px;
}
and have your image width set to 100%
you can change the padding value as you wish, the box will always have the same size thanks to his box-sizing property
Related
I have a list of organization logos on a web page. Most of them use a couple of different colors. I would like to show the silhouette of the logos, and only reveal the real colors on hover.
body {
background: deeppink;
}
img {
filter: brightness(0) invert(1);
}
img:hover {
filter: none;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/240px-Stack_Overflow_icon.svg.png" />
I can make the logos white with the code above, but I would like to make them pink. And not just any pink, I would like to use a specific color code.
I have tried to add the hue-rotate() function, but the logos are still white. I guess it's because of the brightness level.
Any ideas?
EDIT: More precise code
It's not an optimal solution, but adding opacity will work, if the background itself is the same color as you want for the silhouette.
body {
background: deeppink;
}
img {
filter: brightness(0) invert(1);
opacity: 0.8;
}
img:hover {
filter: none;
opacity: 1;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/240px-Stack_Overflow_icon.svg.png" />
I want to decrease image brightness in CSS. I searched a lot but all I've got is about how to change the opacity, but that makes the image more bright.
can anyone help me ?
The feature you're looking for is filter. It is capable of doing a range of image effects, including brightness:
#myimage {
filter: brightness(50%);
}
You can find a helpful article about it here: http://www.html5rocks.com/en/tutorials/filters/understanding-css/
An another: http://davidwalsh.name/css-filters
And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
Note this is something that's only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won't support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter:, -moz-filter, etc).
It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)
Also note that this is not to be confused with the proprietary filter style available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).
If none of that works for you, you could still use the existing opacity feature, but not the way you're thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity. The effect will be of the image behind being darkened.
Finally you can check the browser support of filter here.
OP wants to decrease brightness, not increase it. Opacity makes the image look brighter, not darker.
You can do this by overlaying a black div over the image and setting the opacity of that div.
<style>
#container {
position: relative;
}
div.overlay {
opacity: .9;
background-color: black;
position: absolute;
left: 0; top: 0; height: 256px; width: 256px;
}
</style>
Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
<div class="overlay"></div>
<img src="http://i.imgur.com/G8eyr.png">
</div>
DEMO
In short, place black behind the image, and lower the opactiy. You can do this by wrapping the image within a div, and then lowering the opacity of the image.
For example:
<!DOCTYPE html>
<style>
.img-wrap {
background: black;
display: inline-block;
line-height: 0;
}
.img-wrap > img {
opacity: 0.8;
}
</style>
<div class="img-wrap">
<img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>
Here is a JSFiddle.
You could use:
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.
See the following code for more details.
To make an image gray:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
To give a sepia look:
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
To adjust brightness:
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
To adjust contrast:
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
To Blur an image:
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
I found this today. It really helped me. http://www.propra.nl/playground/css_filters/
All you need is to add this to your css style.:
div {-webkit-filter: brightness(57%)}
If you have a background-image, you can do this : Set a rgba() gradient on the background-image.
.img_container {
float: left;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
border : 1px solid #fff;
}
.image_original {
background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.image_brighness {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.img_container p {
color: #fff;
font-size: 28px;
}
<div class="img_container image_original">
<p>normal</p>
</div>
<div class="img_container image_brighness ">
<p>less brightness</p>
</div>
It's obvious that all you need to do is this
<img src="https://rb.gy/njdqof" class="IMG">
CSS follows
/*if you go lower than 100% the lighting goes dark and above 100% your lighting is brighter*/
.IMG {
filter: brightness(20%);
}
You can use css filters, below and example for web-kit. please look at this example: http://jsfiddle.net/m9sjdbx6/4/
img { -webkit-filter: brightness(0.2);}
-webkit-filter: brightness(0.50);
I've got this cool solution:
https://jsfiddle.net/yLcd5z0h/
try this if you need to convert black image into white:
.classname{
filter: brightness(0) invert(1);
}
Like
.classname
{
opacity: 0.5;
}
When I'm hovering the image I would like it to turn black. The image is gray by default.
img:hover {
filter: grayscale(100%) brightness(1.6) saturate(2) contrast(150);
}
<img src="https://i.stack.imgur.com/wpQiz.png">
Use the invert filter and you will get closer:
img:hover {
filter: invert(1);
}
<img src="https://i.stack.imgur.com/wpQiz.png" >
Or simply brightness(0)
img:hover {
filter: brightness(0);
}
<img src="https://i.stack.imgur.com/wpQiz.png" >
Why not think the other way around, use a black image and change the visual with opacity levels?
img {
width: 100px;
height: auto;
opacity: .5;
transition: opacity .25s;
}
img:hover {
opacity: 1;
}
<img src="https://i.stack.imgur.com/Eo3De.png">
Could not the following be done? (you would need 2 separate images though, one gray and one colored black)
<img src='../img/badge/graydot.png' onmouseover="this.src='../img/badge/blackdot-hover.png';" onmouseout="this.src='../img/badge/graydot.png';" />
I want to decrease image brightness in CSS. I searched a lot but all I've got is about how to change the opacity, but that makes the image more bright.
can anyone help me ?
The feature you're looking for is filter. It is capable of doing a range of image effects, including brightness:
#myimage {
filter: brightness(50%);
}
You can find a helpful article about it here: http://www.html5rocks.com/en/tutorials/filters/understanding-css/
An another: http://davidwalsh.name/css-filters
And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
Note this is something that's only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won't support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter:, -moz-filter, etc).
It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)
Also note that this is not to be confused with the proprietary filter style available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).
If none of that works for you, you could still use the existing opacity feature, but not the way you're thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity. The effect will be of the image behind being darkened.
Finally you can check the browser support of filter here.
OP wants to decrease brightness, not increase it. Opacity makes the image look brighter, not darker.
You can do this by overlaying a black div over the image and setting the opacity of that div.
<style>
#container {
position: relative;
}
div.overlay {
opacity: .9;
background-color: black;
position: absolute;
left: 0; top: 0; height: 256px; width: 256px;
}
</style>
Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
<div class="overlay"></div>
<img src="http://i.imgur.com/G8eyr.png">
</div>
DEMO
In short, place black behind the image, and lower the opactiy. You can do this by wrapping the image within a div, and then lowering the opacity of the image.
For example:
<!DOCTYPE html>
<style>
.img-wrap {
background: black;
display: inline-block;
line-height: 0;
}
.img-wrap > img {
opacity: 0.8;
}
</style>
<div class="img-wrap">
<img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>
Here is a JSFiddle.
You could use:
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.
See the following code for more details.
To make an image gray:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
To give a sepia look:
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
To adjust brightness:
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
To adjust contrast:
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
To Blur an image:
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
I found this today. It really helped me. http://www.propra.nl/playground/css_filters/
All you need is to add this to your css style.:
div {-webkit-filter: brightness(57%)}
If you have a background-image, you can do this : Set a rgba() gradient on the background-image.
.img_container {
float: left;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
border : 1px solid #fff;
}
.image_original {
background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.image_brighness {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.img_container p {
color: #fff;
font-size: 28px;
}
<div class="img_container image_original">
<p>normal</p>
</div>
<div class="img_container image_brighness ">
<p>less brightness</p>
</div>
It's obvious that all you need to do is this
<img src="https://rb.gy/njdqof" class="IMG">
CSS follows
/*if you go lower than 100% the lighting goes dark and above 100% your lighting is brighter*/
.IMG {
filter: brightness(20%);
}
You can use css filters, below and example for web-kit. please look at this example: http://jsfiddle.net/m9sjdbx6/4/
img { -webkit-filter: brightness(0.2);}
-webkit-filter: brightness(0.50);
I've got this cool solution:
https://jsfiddle.net/yLcd5z0h/
try this if you need to convert black image into white:
.classname{
filter: brightness(0) invert(1);
}
Like
.classname
{
opacity: 0.5;
}
I'm working on a project where I need to make modifications in more then 500 images to give outerglow on hover effect. I will need to modify each image to give the outer glow. It will be a very time consuming task.
This is example of one image. All images are transparent .png
Is it possible to give this outerglow effect to the bottle image using any tricks of CSS3?
This is just an example of one image other images are in different size and shape.
This can be done using filter(drop-shadow).
Here is a demo http://jsfiddle.net/jaq316/EKNtM/
And here is the code
<style>
.shadowfilter {
-webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
}
.bottleimage {
width: 500px;
}
</style>
<img
src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Coca_Cola_Zero_bottle.png"
class="shadowfilter bottleimage"/>
here's a plugin i found early that do the trick on PNG Image...
Usage:
Enable glow and set color and radius:
$("#testimg").glow({ radius: "20", color:"green"});
Disable glow:
$("#testimg").glow({ radius: "20", color:"green", disable:true });
or
$("#testimg").glow({ disable:true });
https://github.com/MisterDr/JQuery-Glow
As easy as pie. You just use the same image twice, one above the other.
<div class="container">
<img class="main" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" />
<img class="glow" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" />
</div>
You just work on the image below, scale it a little, bright it until it's white and then blur it. Then you set your opacity on 0 and set it back to one when the above image is hovered.
.container {
position:relative;
background-color:#444444;
width:600px;
height:600px;
}
img {
position:absolute;
max-height:90%;
top:50%;
left:50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
img.main {
z-index:2;
}
img.glow {
z-index:1;
transform: scale(1.01) translate(-50%, -50%);
-webkit-transform: scale(1.01) translate(-50%, -50%);
filter: brightness(0) invert(1) blur(5px);
-webkit-filter: brightness(0) invert(1) blur(5px);
opacity:0;
}
img.main:hover ~ img.glow {
opacity:1;
}
No Javascript required whatsoever.
https://jsfiddle.net/nkq1uxfb/3/
If you have to do this to 500+ images, what I would do is great a transparent PNG of the inverse of the bottle with feathered edges around the bottle and lay that over a DIV with the background color under it and the bottle image in between. This will make the solid background color appear to fade out into the inverse bottle PNG and all you would have to do to change the glow color is change the value of the CSS.
Write some jQuery to let you enter the HEX value and you're set ;)
EDIT *
Problem solved!
http://phillipjroth.com/stackoverflow/8693733/index.html
Edit line 19 of the CSS code "background-color" and it will update the glow. The PNG's are low quality but you can fine tune them to get rid of the ridged edges.
Actually you can do this with the blur CSS3 filter.
Just stack 2 images on top of each other and apply the following style to one of it:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
To change color of the other image, you can play with other filters like the hue-rotate, sephia etc.
I prefer to generate such glows with a bit of stacking. The first image uses the following CSS filter rule:
blur(5px) grayscale(1) sepia(1) saturate(10000%) invert(1)
This gives you a somewhat larger than the base 'bottle' glow in blue.
Then load a second copy of the image at the same coordinates, giving you the bottle with a transparent background atop the blurred blue 'halo' with a similar transparent background.
I found an easy way if you can work with photoshop.
You open the transparent image (example.png) in photoshop and take the blur tool.
Then blur the whole image and save as (example-hover.png).
<div id="img1">
<img src="images/example.png">
</div>
#img1:hover{
background: url('images/example-hover.png') no-repeat 0px 0px;;
}