Hover Box Sidebar Widget

Create beautiful sidebar banners that link directly to your best content with these nicely designed hover boxes.

Last night I was doing some design work to the MD blog and created these nice sidebar banners to promote the different kinds of content I create around the site. Check it out yourself, or take a peak at this screenshot:

Sidebar Widget Hover Boxes

Click for a full size preview.

Here’s how to add these hover boxes to your own site:

Step 1: Add the following styles to your style.css file

/* HOVER BOXES */

a.hover-box {
	background-color: #2287CF;
	border-bottom: 0;
	color: #fff;
	display: block;
	padding: 52px 26px;
	position: relative;
	text-align: center;
}

.hover-box:hover { color: #ddd; }

.hover-box-button {
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 3px;
	display: inline-block;
	opacity: 0.8;
	padding: 7px 16px;
	text-transform: uppercase;
}

.hover-box-title {
	display: block;
	font-size: 26px;
	line-height: 37px;
}

.hover-box-icon {
	color: #fff;
	font-size: 120px;
	line-height: 1;
	opacity: 0.2;
	position: absolute;
		bottom: 0;
		right: 0;
	transform: rotate(8deg);
	z-index: 0;
}

.hover-box-icon-left { left: 0; right: inherit; }

.hover-box,
.hover-box-icon {
	-o-transition: 0.4s;
	-ms-transition: 0.4s;
	-moz-transition: 0.4s;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.hover-box:hover .hover-box-icon {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

Step 2: Add the following code to a Text Widget

Now that the styles are in you can go ahead over to Appearance > Widgets and create a new Text Widget in your Main Sidebar (or any custom sidebar) and paste the following snippet into the content:

<a href="/snippets/" class="hover-box" style="background-color: #2287CF;">

    <span class="hover-box-title mb-single">Set Your Own Box Title Here</span>

    <span class="hover-box-button">Get now  <i class="md-icon-angle-right"></i></span>

    <i class="hover-box-icon md-icon-star"></i>

</a>

…and with that, you’ll get this nice blue box with a star icon:

Star Hover Box Widgets

As you can see, you can change the background color of the box right from the widget code by simply adding in your own hex color.

To get an alternating left-right icon style like you see on the MD blog, apply the hover-box-icon-left class to the icon HTML in the boxes you want the icon to appear on the left:

...
<i class="hover-box-icon hover-box-icon-left md-icon-star"></i>
...

As for the icon itself, you can use any of the built-in MD font icons and simply change out the class, as highlighted in red above.

Add Font Awesome to Your Site

If you need a greater variety of font icons to choose from, consider adding the great Font Awesome library to your site. Once installed, you can simply swap out the MD icon class code (see above) with the ones Font Awesome provides you.

To install Font Awesome with some extra goodies, check out the Better Font Awesome plugin, or simply include the following tag in the Appearance > Marketers Delight > Settings > Header Scripts section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

3 comments add yours

    • I hope to see them on your site, they’d go great with your design!

  1. Hi Alex, can you check if this instruction is still okay? I have followed but when I paste the code into text, it shows up like this:

     

    Set Your Own Box Title Here

    Get now

     

     

Leave a Comment