The issue is that when you get the share widget from the ShareThis website, there are only a couple options for the styling of the button. And the javascript code that you get does not have an image URL in it that you could easily modify to your own image. I even tried copying the javascript that loads from the ShareThis site and loading it from my own site, with modifications. But that didn’t work. What I wanted was a large icon that when moused over would show the sharethis dropdown of all the social sharing options. However, there is no large icon option. Just a few different small icon options that were not going to match my client website icons. So, time to make it my way.

The image was going to appear in a group of icons for navigation. The sharethis icon needed to fit right into the middle of them. Since I was already using some hover css that I’m fond of using for icons like this, avoiding having to use jquery and for that, maybe making the site somewhat more accessible, I went ahead with that. I do this with an object tag to wrap a div inside a link tag, so it will validate.

Then all I did was create another div inside that one, to insert the sharethis javascript code. The HTML for the list menu item down to the javascript looked like this:

<li>
<a href="http://example.com/about">
<object>
<div class="menu-share">
---share this javascript goes here---
</div>
</object>
</a>
</li>


So there are the .menu-share div to show the button, as well as help me hide the image that sharethis will load, without hiding the functionality. All that’s left is the .css:

.menu-share {
background: url('images/share-icon.png') no-repeat 0 top;
height: 56px;
width: 57px;
float: left;
margin: 0 20px;
}
.menu-share:hover {
background-position: 0 -57px;
cursor: pointer;
}
.menu-share img {
display: none;
}


The last little bit just hides any image inside the div. It does not hide the background image, only images that load inside the div. However, all the javascript is still fully functional, loading the social media dropdown as it should.

Enter the simple elements that use nothing but HTML and CSS, and maybe some images.

What I want to demonstrate is a simple way to get a hover effect on an image, without using jquery or javascript. The way this works, basically, is the image will be the background of a div element that will reside inside a link. Actually the div does not have to be inside a link, but it does if you want the image to link to some other url. The background image actually contains two copies of your image, with the second copy having whatever hover effect you want, such as slightly darker or whatever. In the CSS code, you have the background image positioned at the top of the div, and in a hover of the same div, you have the background image positioned at the bottom. When you hover, voila! And unlike the javascript version of hover, you don’t have to wait a split second for the hover to work, since the image is already loaded!

To the rightyou can see a screenshot of the effect I’m going to show you. On the same screenshot you can also see a green button. I used the same effect on that. The button is part of a jquery slider, so it’s not like I never use jquery :)

I’m going to be using the coffee cup that’s available here. Actually I recommend this set of twitter icons, they are probably the coolest you can find.

First, I open Fireworks and find the coffee cup image I downloaded. Then I resize it to the size I need for the footer of my website. For me that’s 96px wide and 71px high. Then, I copy the image and paste it over itself. Next, move the second copy so that the top of the second copy just touches the bottom of the first copy. Then “Fit Canvas” so that the two images are now visible. Next, I select the bottom image and modify the color by reducing the saturation to nothing. This makes it greyscale. See the screenshot to the right.

Then save the image and optimize it. I save it as a transparent .PNG file, but you can also save it as a .jpg if you don’t need transparency. I personally use PNG Gauntlet to optimize the .PNG.

Then I load it into the image folder on my website, and put the following code in the CSS file:


.twitter {
float: right;
width: 96px;
height: 71px;
background: url('images/social/twitter-cup.png') no-repeat bottom;
margin: 17px 44px 4px 0;
}
.twitter:hover {
background: url('images/social/twitter-cup.png') no-repeat top;
}

My div has a class ‘twitter’. Then simply put the div in your website where you want it to appear. Just call it the same class and it will work like a charm. You can also wrap it with a link if you want it to be hyperlinked.

And that’s it! The simplest (I believe) way to have cool hover effects on your website, that works instantly since the image is already preloaded when the page loads.

See the footer of my web design site for a sample: See The Coffee Cup Here

If you implement this little trick, please let me know by commenting here or tweeting it!

Anyway, go check out this list of 50 tutorials to help you create really cool 3D effects:

http://www.smashingmagazine.com/2009/06/16/50-excellent-3d-adobe-illustrator-tutorials