Skip to main content

WordPress HTML5 Clickable Div – Highlight Hover Post

0

In this tutorial we will highlight hovering over a clickable div which has an image and a title. For an example please visit my homepage 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.

HTML Code - Clickable Div
Image provided by Shutterstock

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. A text editor like Brackets Text Editor may also be beneficial. A testing server may be required to test out the WordPress snippets.

Demo

Download

Download Clickable Div - Highlight & Hover

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

HTML5 Clickable Div

Below is a snippet of the HTML5. The thumbnail class is attached to the link which itself is the container. The inner

<div>

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

Topics:

%d bloggers like this: