Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 432
  • Last Modified:

Colorizing an Image using CSS (Filter?)

Dear All,

I would like to display an image on a page that is colorized so that it looks blue for example, but when the user mouseovers on it it changes color. Is there a way of doing this? Perhaps an IE specific filter can achieve the colorization of images?

Any help much appreciated.

Ben.
0
webtechy
Asked:
webtechy
1 Solution
 
mreuringCommented:
Allas I don't have the time to look into this further, as it should be relatively easy, but in the mean time, some links for reading up on your knowledge perhaps :)
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/filter.asp how to do filters in IE only css
http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp the selection of possible filters you can apply...

Good luck,

 Martin
0
 
mrichmonCommented:
Another reference for filters that is from the same site (but a different page) as mreuing's links is :
http://msdn.microsoft.com/workshop/author/filter/filters.asp

THe problem with filters in CSS that I have seen is that they are not supported very well.

One easy way which doesn't involve CSS is to have two images and use javascript to change the image on mouseover.
0
 
hyperslugCommented:
Here's a quick and dirty solution using alpha:

<style>
      .alpha {
            filter: alpha(opacity=50);      /* IE */
             -moz-opacity: 0.5; /* Mozilla */
      }
      .red {
            background: red;
            width: 0%;
      }
      .blue {
            background: blue;
            width: 0%;
      }
</style>

<div class="blue" onmouseover="this.className='red'" onmouseout="this.className='blue'">
      <img src="PICTURE.jpg" class="alpha"></div>
      
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
webtechyAuthor Commented:
Hi guys,

I'm afraid I don't have that much control over the code to add onmouseout's or some more clever JavaScript etc. I did _think_ about that though and seems the closest you can do.

Have looked through the Microsoft filters and can't seem to find anything that really applies unfortunately. Not too worried about browser support as not "mission critical" if doesn't work - just a nice to have ...

Cheers,

Ben.
0
 
hyperslugCommented:
Ok, then use an <A> tag, (doesn't seem to work right in mozilla though):

---------------------------------------------------------------------------------------
<style>
      .alpha {
            filter: alpha(opacity=50);     /* IE */
            -moz-opacity: 0.5; /* Mozilla */
            border: 0px;
            cursor: default; /* discourage ppl from clicking */
      }
      a.colorize { background: red; }
      a.colorize:hover { background: blue; }
</style>

<a href="#" class="colorize"><img src="/graphics/kids.jpg" class="alpha"></a>
0
 
Joakim_Commented:
Filters sucks, and they are compatible with very few browsers, find an another solution.
0
 
webtechyAuthor Commented:
As I say, not too fussed about compatibility as it doesn't really matter too much anyway ...
0
 
hyperslugCommented:
Did the A tag method work?
0
 
webtechyAuthor Commented:
I didn't have the option of changing the code as such, although I did apply a similar technique elsewhere on the site. Although it's not colorization in Paint Shop Pro terms (as the image is just composed on a range of blues for example), it does tint the image so that it matches the general branding of the site.
0
 
webtechyAuthor Commented:
(I did try img:hover on the off-chance that that may work ;-))
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now