Preview PHP HTML CSS JS
Click to copy
Click to copy

Paste anywhere WordPress accepts HTML code:

<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>
Click to copy

Paste into your child theme's style.css file

/* HOVER BOXES */

a.hover-box,
.format-text-main 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);
}
Click to copy

Hover Box Sidebar Widget

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

To get an alternating left-right icon style 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 your comment

    • 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

     

     

Labs

Get the latest MD sent straight to your inbox

There's always something new in the works in the MD Labs! Join the email list to get the newest content and releases sent straight to your inbox.*

Join the MD Newsletter

* I only email you when there's something new, or to share an exciting MD sneak peak.