Custom Image Hover Boxes Using the Divi Code Module

Oct 17, 2018 | CSS Tutorial | 0 comments

I was cleaning up one of my demo installs and came across this hover box I made one of the many times I was playing around with code. It’s a simple hover effect with a button, a grid of these could link to different shop category pages (like the example shown here), or they could link to different types of business services, most popular blog categories — whatever pages you’d like to feature.

There are plugins available that do this but if you like to try to code things yourself then this is for you 🙂 It’s a good example of something simple enough to do with basic HTML and CSS skills, like copying/pasting a URL and changing color codes.

You can use a regular, non-transparent jpg image instead or even a fun gif, all you need is a main image and a hover image (both should be the same dimensions).

Instructions

  • Add a code module to your page
  • Copy and paste the HTML code below and tweak
    • Replace any image URLs (the picture of the girl is not included but the link to purchase is below in the Notes)
    • Replace the URL of the page you want to link to
    • Replace the button text
Fun Custom Hover Box for Shop Categories & Other Uses
  • Copy and paste the CSS code below and tweak
    • Replace any image URLs (the direct link to my glasses/heart graphic is in the code)
    • Replace with your colors where noted
    • The CSS can go in Divi theme options > custom CSS box or in the page CSS box or wherever you prefer
  • If you want a centered button the code to do that is in the comments
  • There is code included to make everything visible on mobile/tablet because of touchscreens

</> html code

<div class="imagehoverbox-container"><img src="https://placehold.it/1200x763" class="imagehoverbox-image">
    <div class="imagehoverbox-overlay">
        <div class="imagehoverbox-text"><a href="http://example.com/">Shop Glasses</a></div>
    </div>
</div>

{;} css code

/********************************************/
/*** CUSTOM IMAGE HOVER BOXES WITH BUTTON ***/
/********************************************/
 .imagehoverbox-container {
     position: relative;
     width: 100%;
}
 .imagehoverbox-image {
     display: block;
     width: 100%;
     height: auto;
}
 .imagehoverbox-overlay {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     opacity: 0;
     -moz-transition: all 0.2s;
     -webkit-transition: all 0.2s;
     transition: all 0.2s;
     background-image: url("https://filedn.com/ljRP1fGUfVWQzMGyVol4YoR/fade-hover-hearts.png"); /* this is the image that shows on hover replace with yours */
     background-size: cover;
}
 .imagehoverbox-container:hover .imagehoverbox-overlay {
     opacity: 1;
}
 .imagehoverbox-text {
     position: absolute;
     top: 50%; /* this controls how high/low the button sits */
     left: 10%;
     /* if you want your button centered use this instead and delete left 10% line
     left: 50%;
     transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%); */
     cursor: pointer;
     background: #ed04c6; /* background button color */
     padding: .6em 1em .7em;
     border-radius: 3px; /* button rounded edges */
     font-size: 1.2em;
     font-family: inherit; /* will use body font but you can change font here if you prefer */
     font-weight: bold;
     line-height: 1em;
}
 .imagehoverbox-text a {
     color: #222; /* button text color */
}
 .imagehoverbox-text:hover {
     background: #e8e81e; /* background button color on hover */
}
/*** Make text smaller and everything visible on smaller screens for touchscreens ***/
@media only screen and (max-width: 980px) {
	.imagehoverbox-overlay {
		opacity: 1;
	}
	 .imagehoverbox-text {
	    font-size: 1em;
	}
}

 

Notes:

  • The picture of the girl can be purchased here.
  • Both images should be the same dimensions.
  • There’s plenty of other ways to do this, this is just one way I find pretty easy to edit.
  • This code will work on any WordPress theme, not just Divi.
  • Screenfly is just an online emulator to give an idea of what a site/page looks like on multiple browser sizes. You’re still responsible for your own real world testing.