Tom’s Graphic Design Journal

Adding more text and bulk to my blog is one thing I certainly like to do haha...but I also like to keep notes so I don't forget how the heck I did some things. I'm adding this quick note here and hopefully it benefits someone else out there.

My portfolio site was recently updated and I went back and started playing around with the CSS a bit and wanted to make some subtle enhancements. Being on the opacity theme with the effects on my site, I decided I wanted to have the thumbnails of my work grayed out and then show 100% when you rolled your mouse over them. Simple right? Well, yes, it is easy but there was one tiny hang-up with making it compatible with IE.

As many people know IE has some quirks with opacity, transparent pngs, etc. My blog took a lot of work and time making it cross-browser friendly. I still have yet to go back and make a version for Safari that I'm happy with...but I digress.

What I did to get the thumbnails 25% opacity was used a CSS class. I could've used moo.fx for this all mind you, but I didn't really need them to "fade" smoothly in, just popping from 25% to 100% was fine. It would probably be too taxing on some computers anyway and the code would be longer, yada yada. So this was most effecient.

I simply added the following in my css:

.gray { display: inline-block; opacity: .25; filter: alpha(opacity=25); }
a:hover { opacity: 1; filter: alpha(opacity=100);}

A little trick here, the "opacity" value is not recognized by IE, but filter is. That same filter property is used by IE for transparent PNGs too if you take a peak at the CSS running this blog.

There was absolutely no harm in making a:hover 100% opaicty because any link that was 100% still looks like nothing happened! So that's a good trick and saved some time coding.

The real trick here, though, is the "display: inline-block" because IE's dreaded "hasLayout" issue. I needed to specify something to trigger this property in IE and messing with the size was not something I wanted to do. The "holly hack" is merely making the height of an object set to 1% or 100%..whichever. Again, I didn't want to take any chances of browsers that did pay attention to that size to make my thumbnails be too small or too large.

So after adding the CSS, I merely added class="gray" to any A tag that I wanted the effect applied to. It was just the images in this case, but it could be any link and anything that's inside that link tag of course gets the opacity applied to it! Cool! Also, it doesn't have to be just a link tag...it can be anything you want to have this rollover effect.

Very simple. Nothing earth shattering, but something I found soooooo s