While building the Smells Like Bakin’ website, I followed an example. The example uses CSS to create the hover effect for two social media buttons. When you hover over either Twitter or Facebook, a box appears behind both icons.

Get Bakin Original

Code

The HTML Code looks like this:

<div class="grid_5 omega" id="butt">
<h2>Get Bakin' with Us</h2>
<div id="contact">
<p>Call us: <span>1-555-CUP-Cake</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com</a>
</p>
</div>
<p>
We announce all of our new flavors first through Facebook & Twitter, and even take requests!
</p>
<a href="http://www.facebook.com/SmellsLikeBakin">
<img src="img/facebook.gif" alt="facebook"></a>
<a href="http://www.twitter.com/#!/smellsliekbakin">
<img src="img/twitter.gif" alt="twitter"></a>
</div>

The CSS looks like:

#butt:hover img {
background-color: #4CC4A7;
}

To Fix

For this project, I wanted the hover to show only for the specific icon that you are hovering the mouse over. The first step was to change the #butt from an id selector to a class. Second, I applied the class to each link. Third, I removed the id from the div. The result is a box appear behind each icon when you hover over them.

Both icons are circles, not boxes. I didn’t like a box appearing behind the icons. I wanted to change the hover to show a circle instead of a box. I changed to code to create a rounded background by using CSS Circles.

The new code looks like this:

<div class="grid_5 omega">
<h2>Get Bakin' with Us</h2>
<div id="contact">
<p>Call us: <span>1-555-CUP-Cake</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com</a>
</p>
</div>
<p>
We announce all of our new flavors first through Facebook & Twitter, and even take requests!
</p>
<a href="http://www.facebook.com/SmellsLikeBakin" class="butt">
<img src="img/facebook.gif" alt="facebook"></a>
<a href="http://www.twitter.com/#!/smellsliekbakin" class="butt">
<img src="img/twitter.gif" alt="twitter"></a>
</div>

CSS

.butt:hover img {
background-color: #4CC4A7;
border-radius: 50%;
width: 46px;
height: 46px;}

Now, the result is a circle appears behind each icon when you hover over them.

Get Bakin Button Fix

Related Article

Bakin with a CMS