Is it possible to change the color of an image using only CSS?
(I'm using the transparent backgrounded glyphicons, and I need different symbol [not background] colors for my theme)
1
-
have a look at stackoverflow.com/questions/3430343/…Ingo– Ingo2013-02-15 08:33:27 +00:00Commented Feb 15, 2013 at 8:33
Add a comment
|
2 Answers
You can use image tints, but I don't know if it's going to give you the effect you expect:
Basically you wrap a <figure> element around your <img/> and apply styling to it:
/*HTML*/
<figure class="tint">
<img src="icon.png" width="400" height="260">
</figure>
/*CSS*/
.tint {
position: relative;
float: left;
cursor: pointer;
}
.tint:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,255,255, 0.5);
-moz-transition: background .3s linear;
-webkit-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;
}
.tint:hover:before {
background: none;
}
Check the link for a demo and full code samples.
On this website you can also check out some different methods.
2 Comments
NielsInc
Of course, this is only if you use
<img/> tags. Otherwise, if it's a background in CSS, I don't know how to change it.
stackoverflowuser95
Thanks, but that does background as well (which I can get by appending e.g.: with
style="background-color: red" to the parent tag).No. As these are image icons you can not change their color. You can try using these http://www.entypo.com/. As these are fonts they can easily change colors.
