Skip to main content

WordPress HTML5 Clickable Div – Highlight Hover Post


In this tutorial we will highlight hovering over a clickable div which has an image and a title. For an example please visit my homepage With the magic of HTML5 and CSS3 you can now insert a <div> which is a block element, inside of a <a> which is an inline element. Previously this would have resulted in HTML errors.

HTML Code - Clickable Div
Image provided by Shutterstock

If HTML5 doesn’t fit your requirements there are 2 jQuery methods in the zip file along with the code to add to your own WordPress theme.


A little knowledge of HTML5, jQuery and CSS3 would be useful but not required. A text editor like Brackets Text Editor may also be beneficial. A testing server may be required to test out the WordPress snippets.



Download Clickable Div - Highlight & Hover

In the source code you will find the following:
HTML5 Method
2 jQuery Methods
WordPress Include Code

Once downloaded extract and open index.html in your browser.

HTML5 Clickable Div

Below is a snippet of the HTML5. The thumbnail class is attached to the link which itself is the container. The inner
<div> holds the image and title.

WordPress Code

Below is the WordPress loop which fetches the latest 4 posts and outputs the HTML5.



I have used the following resources in this tutorial.
Images courtesy of Pexels
Grid provided by Gridlex
Normalize CSS – An HTML5 alternative to CSS Reset


%d bloggers like this: