WordPress

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.

Photo by Pixabay on Pexels.com

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

Share
Published by
Tracy Ridge

Recent Posts

Hot New Web Dev – November 2024

Welcome to Hot Web Dev November 2024, featuring the latest technology and web development news.… Read More

3 weeks ago

Hot New Web Dev – October 2024

Welcome to Hot Web Dev October 2024, featuring the latest technology and web development news.… Read More

2 months ago

New Svelte 5 Guessing Game 2024

In this tutorial, you’ll build a fun and interactive guessing game using Svelte 5, the… Read More

3 months ago

Hot New Web Dev – September 2024

Welcome to Hot Web Dev September 2024, featuring the latest technology and web development news.… Read More

3 months ago

New JavaScript Guessing Game 2024

The JavaScript guessing game tutorial is a simple beginner's project. It features modern JavaScript syntax… Read More

3 months ago

Hot Web Dev – 12 Useful Top Tools of 2023

If you have been following the monthly Hot Web Dev magazine you will find the… Read More

3 months ago