skip to main content

WordPress HTML5 Clickable Div – Highlight Hover Post

0

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.

Prerequisites

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.

Demo

Download

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.

Download

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.

CSS

Sources

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