---
title: 'WordPress HTML5 Clickable Div - Highlight Hover Post'
url: 'https://worldoweb.co.uk/2016/html5-clickable-div-highlight-hover-post'
markdown: 'https://worldoweb.co.uk/2016/html5-clickable-div-highlight-hover-post.md'
date: '2016-07-21'
description: 'A tutorial on creating clickable divs in WordPress using HTML5, jQuery, and CSS3, including a demo and downloadable code.'
taxonomy:
  category:
    - 'Web Development'
    - WordPress
  tag:
    - Tutorial
    - HTML
    - jQuery
    - CSS
---

# WordPress HTML5 Clickable Div - Highlight Hover Post

 Published on July 21, 2016 by Tracy Ridge in  [Web Development](https://worldoweb.co.uk/category/category:Web%20Development) 

 [WordPress](https://worldoweb.co.uk/category/category:WordPress) 

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](https://worldoweb.co.uk/user/data/wp-content/uploads/2016/07/pexels-photo-270360-scaled.jpeg)Photo by Pixabay on [Pexels.com](https://www.pexels.com/photo/turned-on-computer-monitor-displaying-text-270360/)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](https://www.websiteplanet.com/blog/html-guide-beginners/), jQuery and CSS3 would be useful but not required. I highly recommend using [Visual Studio Code](https://code.visualstudio.com/) for your editing needs, you can further enhance the editor with a variety of [extensions](https://www.worldoweb.co.uk/2022/top-10-visual-studio-code-extensions-2022). A testing server may be required to test out the WordPress snippets.

## Demo

You can find the demo on [JS Fiddle](https://jsfiddle.net/ridgey28/nc3ckr6u/)

## Download

[Clickable Image Divs](https://www.worldoweb.co.uk/user/pages/downloads/Clickable-Image-Divs-1.0.zip)

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](https://www.pexels.com/) – Free stock photos for personal and commercial use.
- [Gridlex](https://gridlex.devlint.fr/) – A simple and responsive CSS grid system.
- [Normalize CSS](https://necolas.github.io/normalize.css/) – An HTML5 alternative to CSS Reset.

### Share

 [X](https://x.com/intent/tweet?text=WordPress%20HTML5%20Clickable%20Div%20-%20Highlight%20Hover%20Post&url=https%3A%2F%2Fworldoweb.co.uk%2F2016%2Fhtml5-clickable-div-highlight-hover-post&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fworldoweb.co.uk%2F2016%2Fhtml5-clickable-div-highlight-hover-post "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fworldoweb.co.uk%2F2016%2Fhtml5-clickable-div-highlight-hover-post&title=WordPress%20HTML5%20Clickable%20Div%20-%20Highlight%20Hover%20Post "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fworldoweb.co.uk%2F2016%2Fhtml5-clickable-div-highlight-hover-post "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=WordPress%20HTML5%20Clickable%20Div%20-%20Highlight%20Hover%20Post%20https%3A%2F%2Fworldoweb.co.uk%2F2016%2Fhtml5-clickable-div-highlight-hover-post "Share on Bluesky") [Email](mailto:?subject=WordPress%20HTML5%20Clickable%20Div%20-%20Highlight%20Hover%20Post&body=https%3A%2F%2Fworldoweb.co.uk%2F2016%2Fhtml5-clickable-div-highlight-hover-post "Share via email") 

#### Tags

 [ Tutorial](https://worldoweb.co.uk/tag/tag:Tutorial) [ HTML](https://worldoweb.co.uk/tag/tag:HTML) [ jQuery](https://worldoweb.co.uk/tag/tag:jQuery) [ CSS](https://worldoweb.co.uk/tag/tag:CSS) 

##### Next

 [ ← Fighting Malware - Neat Security Tools for the Security Conscious ](https://worldoweb.co.uk/2016/fighting-malware-security-tools) 

OR

##### Previous

 [ WOW Update - New Theme and Key Tools → ](https://worldoweb.co.uk/2016/wow-update-new-theme-key-tools)

---

## Navigation

- Previous: [Fighting Malware - Neat Security Tools for the Security Conscious](https://worldoweb.co.uk/2016/fighting-malware-security-tools.md)
- Next: [WOW Update - New Theme and Key Tools](https://worldoweb.co.uk/2016/wow-update-new-theme-key-tools.md)