Click to copy

Paste anywhere WordPress accepts HTML code:

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

Paste into your child theme's style.css file

Click to copy

.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="" />

Start Building Websites That Delight

You can use the Marketers Delight WordPress Theme on unlimited sites. New features & updates are delivered to sites with your active license key.

Add to Cart

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