While I like to discover and test the latest in HTML5 and CSS3, I don’t always implement every new trick that I find. My basic rule of thumb is, if it enhances my site, in a useful and functional way, then I’ll consider adding the new code to my site. Especially if that new code provides a Wow factor for my visitors. I recently made such a discovery. I learned how to animate my website’s logo and nearby text without using a gif and using nothing but CSS3. Here’s how.
As per typical CSS3, the majority of the code takes place in the CSS file and there is minimal work in the htm file. I won’t show the main wrapper, or container element, as I’ll assume that you already have that included in your CSS. What I will describe are the specific wrappers and elements for this technique and the type of image file that you’ll need. How you implement it on your site is up to you.
How Do CSS3 Animations Work?
This CSS3 animation transition for the image works with png files with a transparent background. This way, the background of the image will be the same color as your site, but when the visitor hovers over it, a new color slowly fades in. The color will fade out if the visitor moves the cursor away.
Let’s start with elements for the logo image and the text around the logo. You do not need to use the text in conjunction with the logo, but I’m including it here to show how it’s done:
.logo-image {
-webkit-transition: background-color 400ms ease-in;
-moz-transition: background-color 400ms ease-in;
transition: background-color 400ms ease-in;
}
.logo-title {
color: #B7BDC8;
font-size: 2em;
font-weight: normal;
padding-bottom: .3em;
-webkit-transition: color 400ms ease-in;
-moz-transition: color 400ms ease-in;
transition: color 400ms ease-in;
}
And now the code for when the visitor hovers over the text and/or logo image:
.logo-title:hover {
color: #CEE2AE;
}
.logo-image:hover {
background-color: #88B655;
}
Add this to your htm file:
<h2 class=”logo-title”>Some text here
<a href=”add a link if you want the visitor to go somewhere”>
<img src=”logo.png” class=”logo-image” alt=”important SEO text here” title=”popup text” /></a>
</h2>
You don’t need to add the href tag if you don’t want the image to link to anything. It’s included here to show that it is possible.
A demo of this technique is shown here.
This is a nice and subtle transition effect for both text and images with a transparent background. It works well in Firefox and Chrome. For Internet Explorer, you simply lose the transition effect and won’t see the slow fade in and out.
