WordPress HTML5 Clickable Div - Highlight Hover Post

Published on July 21, 2016 by Tracy Ridge in

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.

turned on computer monitor displaying text Photo by Pixabay on Pexels.comIf 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

You can find the demo on JS Fiddle

Download

Clickable Image Divs

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

HTML

<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


<?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.

Pexels – Free stock photos for personal and commercial use.
Gridlex – A simple and responsive CSS grid system.
Normalize CSS – An HTML5 alternative to CSS Reset.