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.
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.
