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://www.worldoweb.co.uk/wp-content/uploads/2016/07/pexels-photo-270360-scaled.jpeg)
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
Discover more from WorldOWeb
Subscribe to get the latest posts sent to your email.