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
holds the image and title.

<a class="box col thumbnail " href="" title="Doggies">
                <img src="images/dogs.jpg" alt="Dogs">
                <h2>These dogs are cute</h2></div>

        <a class="box col thumbnail " href="" title="Cactus">
                <img src="images/cactus.jpg" alt="Cactus">
                <h2>Do you feel a little prick?</h2></div>

        <a class="box col thumbnail " href="" title="Mac">

                <img src="images/mac.jpg" alt="Mac">
                <h2>A Mac Lovers Paradise</h2>

WordPress Code

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

<?php global $post_id;?>
        <div class="grid">
            <?php $args = array( 'posts_per_page' => '4'); //sets the amount of posts per page

                // The Query
                $query1 = new WP_Query( $args );

                // The Loop
                if ( $query1->have_posts() ) :?>

                <?php while ( $query1->have_posts()) : $query1->the_post();?>
                    <a class="box col thumbnail" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                            <?php echo get_the_post_thumbnail($post_id, 'full');?>
                                <h2><?php the_title();?></h2>

                    <?php endwhile;  endif; //end loops?>
        <?php wp_reset_postdata(); //reset query, particularly useful if you need more loops?>


img {
    max-width: 100%;
    height: auto;

h2 {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 3em;
    -ms-hyphens: auto;
    text-align: center;

h2 a {
    color: #333;
    text-decoration: none;

.thumbnail {
    border: solid 1px #D4D4D4;

.thumbnail:hover {
    background: #ECEDEF;
    cursor: pointer;

/*HTML5 Method */ {
    text-decoration: none; /*Stops text link in Chrome from having decoration */

.box {
    display: block;

.box h2 {
    color: #333;
    text-decoration: none;


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


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.