WordPress HTML5 Clickable Div – Highlight Hover Post

In this tutorial, we will highlight hovering over a clickable div which contains an image and a title. 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. Feel free to check out the code and also the demo which is included.

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. I highly recommend using Visual Studio Code for your editing needs, you can further enhance the editor with a variety of extensions. 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 web browser.

HTML5 Clickable Div

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

<a class="box col thumbnail " href="https://www.pexels.com/photo/3-tan-short-coated-puppy-on-gray-dirt-during-daytime-26128/" title="Doggies">
            <div>
                <img src="images/dogs.jpg" alt="Dogs">
                <h2>These dogs are cute</h2></div>
        </a>

        <a class="box col thumbnail " href="https://www.pexels.com/photo/lights-tree-cactus-christmas-tree-76081/" title="Cactus">
            <div>
                <img src="images/cactus.jpg" alt="Cactus">
                <h2>Do you feel a little prick?</h2></div>
        </a>

        <a class="box col thumbnail " href="https://www.pexels.com/photo/iphone-notebook-pen-working-34202/" title="Mac">
            <div>

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

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(); ?>">
                        <div>
                            <?php echo get_the_post_thumbnail($post_id, 'full');?>
                                <h2><?php the_title();?></h2>
                        </div>
                    </a>


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

CSS

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 */

a.box:-webkit-any-link {
    text-decoration: none; /*Stops text link in Chrome from having decoration */
}

.box {
    display: block;
}

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

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