When I was designing the new Ask-a-Pro Detailer blog for Detailed Image I figured out a way to do an image swap without using Javascript.

The basis of this image swap technique is to set a background image to be your image you want to have swapped when you hover over it. Then insert the default image which will sit on top of the background hiding the background. Create a style to change the opacity of the default image to full transparency when you hover over it, voila you have an image swap.

Requirements
CSS3 Property: Opacity
Opacity changes the transparency of an element. Most modern browsers already support this CSS3 property. Set values between 0.0 (full transparency) to 1.0 (no transparency).

CSS2 Property: Pseudo Class :hover
Pseudo Class :hover is a dynamic action that happens when you hover over an element.

Examples:

Basic image swap using CSS.

The Code:
HTML
<div id=”css-image-swap-1″>
<img id=”swap-1″ src=”default-image-url” alt=”CSS image swap” />
</div>

CSS
#css-image-swap-1{
width:300px; height:150px; background:url(swap-image-url);
}
#css-image-swap-1 img:hover{
opacity:0;
}

I mentioned above that this method should work with most the modern browsers but I know it doesn’t work for IE7 and older because IE totally sucks.

I’m sure this has been done before but I’d thought I’d share this with everyone. I didn’t find this particular technique when I searched for CSS image swap but I did find others using this basic concept using CSS visibility instead of CSS opacity. Both techniques will get the job done for an image swap.

Comments (5)

I present to you Woody Paige’s Chalkboard from Around the Horn. We threw this site together in a matter of days after Adam did some analytics evaluation of Tastefully Driven and discovered that our Woody Paige thread was one of the most popular pages.

WoodyPaigeQuotes.com features Woody’s past chalkboard quotes, submit your own Woody Paige Chalkboard Quote, easy way to follow via RSS Feed, Twitter, and email, and lastly user comments.

This was a quick and fun project. Adam posted details on the our WoodyPiageQuotes.com to do list on his blog. Woody Paige’s Chalkboard always gives me a laugh which made making this site all the more fun to do. Enjoy Woody Paige’s Chalk Board Quotes.

Comments (0)

Just in time for the holidays is My-Wish-List.com. Create your own wish list online and share it with your friends and family via email, Facebook, and Twitter.

Simply enter your name and the gifts you desire most then click “Create Wish List Now”. All done, your wish list is created with your personal permanent link to share with friends and family. No registration is necessary, create unlimited lists and it’s completely free.

Once your wish list is created, you and your friends and family can check Amazon and Ebay for the gifts to making shopping easy.

This was a fun little side project where I got to better my programming skills slightly. A little help from Adam and his programming expertise it’s up and ready for the holidays.

It’ll be interesting to see if this catches on with it’s easy sharing capability. If one person shares their wish list with their friends and family then one of them likes it and does the same it could get viral.

Create your own wish now! Happy Holidays!

Comments (0)

PicApp has just made life easier for bloggers and web content creators with their innovative news and stock photo website. All their images are free and legal for you to use. This is super convenient to bloggers looking for images for their posts. With PicApp there’s no more worries on finding free and legal photos to use.

The picture below from PicApp of Larry Fitzgerald comes from a game that was played just earlier today between the Arizona Cardinals and Seattle Seahawks. When you use a PicApp image it also offers thumbnails of additional images and the option for others to embed the image.

PicApp is easy to use. All you have to do is search for the image you desire, click on it, then copy and paste the code into your blog. PicApp has also partnered up with some major content providers like Getty Images, Corbis, Pacific Coast News, and Newscom just to name a few, to bring you premium images. On top of all that PicApp is always updating with new content as you can see from the Larry Fitzgerald image from a game that finished no more than a few hours ago.

For funsies lets search for Transformers Revenge of the Fallen and embed some images. I got a badass picture of Optimus Prime and the stunning Meagan Fox.

The only downside is that the image code automatically links back to the image at PicApp, but that’s nothing that can’t be changed with a little HTML editing. (Update: The link must stay intact, it’s part of their terms)

Worry free image use, what more can you ask for. When you’re looking for stock images or up to date news images I think you got start at PicApp.

Comments (1)

Check, check, check it, my new blog design. I haven’t blogged much lately while I’ve been working on this redesign with my free time, but it’s done and I’ve got a fresh new look that still has it’s originality.

Old Design

New Design

New features

• Wide open layout to better accommodate posting images and videos
• Better post navigation
• New category navigation
• Graphic enhancements
• Shared items from my Google Reader
• More ways to to connect with me

Now that I got the new blog design done, it’s time to get back to some blogging. Enjoy the new design!

Comments (2)