Create an Image Hover Effect with Text in WordPress

Hi Ashley –

I want to create a page for specific books, but I want as little text as possible on the page. Instead, I would like to make it so that the book synopsis pops up when you hover over the image (instead of having something like a gallery where you need to click to engage the info). Is there a plugin you recommend for this?

Thanks!

Jennifer

Hi Jennifer!

If you’re looking for a plugin in the WordPress.org repository, then sadly, I’m not the girl to ask.

I’m the girl who codes it from scratch! Yeehaw!

If you’re a lean, mean, coding machine, then buckle up and I’ll help you code this 100% yourself. Or if you just want the ready-made plugin you can get that at the end.

Let’s talk about our future epic plugin.

• We’ll be creating a new shortcode that looks like this: [hover-effect image="image URL here" alt="alt text for the image"]Text you want to appear on hover here.[/hover-effect]
• When you load the page, you’ll just see the image(s).
• When you hover over the image, the text will appear next to it.

Are you ready, boots??

Create that plugin file, girl!

If this isn’t your first rodeo, you know what this part is all about. Create the plugin folder and file.

1. Create a new folder on your desktop for the plugin. No spaces in the folder name, please! All lowercase with hyphens ( – ) is best. I’m going to go with ng-image-hover.
2. Open up your text editor of choice. I use Phpstorm because it’s bomb for coding. Other free alternatives are: Notepad++ (Windows) and TextWrangler (Mac).
3. Create a new file in that folder you just created. Give it the same name as the folder but with .php on the end. I’m going with ng-image-hover.php

Once you’ve got your file created, you need to add the plugin comment block to the top. This bit of code is a comment that tells WordPress, “Hey girlfriend! I’m a plugin! Make sure you recognize me in the plugins menu.”

Here’s what it looks like:

<?php
/*
 * Plugin Name: NG Image Hover Effect
 * Plugin URI: https://www.nosegraze.com/image-hover-effect-wordpress/
 * Description: Simple shortcode that shows hidden text when you hover over an image.
 * Version: 1.0
 * Author: Nose Graze
 * Author URI: https://www.nosegraze.com
 * License: GPL2
 * 
 * @package ng-image-hover
 * @copyright Copyright (c) 2015, Nose Graze Ltd.
 * @license GPL2+
*/

Of course you can change the Plugin Name, Description, etc. to whatever you want.

Next, let’s create a new shortcode and make it do stuff.

Here’s the skeleton of the piece of code for making a shortcode:

/**
 * Shortcode
 *
 * Creates our shortcode for the image hover effect.
 *
 * @param array  $atts    Attributes for this shortcode.
 * @param string $content Content in between the shortcode tags.
 *
 * @return string
 */
function ng_image_hover_shortcode( $atts, $content = '' ) {
	$atts = shortcode_atts( array(
		'image' => '',
		'alt'   => ''
	), $atts, 'hover-effect' );

	// Stuff to go here!

}

add_shortcode( 'hover-effect', 'ng_image_hover_shortcode' );

You’ll want to put this directly below the comment block we created before.

Let me break it down for you.

1. That bit at the top surrounded by /** */ is a comment. It’s basically a description of what we’re doing. This is just to help you remember what’s going on in your code.
2. Then we create a new function. I called mine ng_image_hover_shortcode. The name isn’t important, but it must be unique. Two functions can’t have the same name (even if they’re in different plugins/themes!). That’s why it’s good to always prefix yours with something unique (like I prefixed mine with ng_image_hover_ which is the name of my plugin.
3. The function takes two arguments: the attributes and the content. Here’s an example of an attribute: [hover-effect image="image URL here"]Text you want to appear on hover here.[/hover-effect]. See the bit I highlighted? The image="blah blah"? That’s the attribute. The content, on the other hand, is what appears in between each set of brackets. In the above example, it’s the words Text you want to appear on hover here..
4. Then in the shortcode function, I left another comment showing you where we’re going to be working later ( // Stuff to go here! ). That bit comes next.
5. Finally, after the function, I actually register the shortcode with WordPress. I tell it the shortcode exists. That’s this line:

   add_shortcode( 'hover-effect', 'ng_image_hover_shortcode' );

   The first item in the parenthesis ('hover-effect') is what you want the shortcode to be. You can change this to whatever you want. The second item ('ng_image_hover_shortcode') is the name of your function from before. This must match your function name!

Let’s set up the HTML of our hover effect.

Before we can make the shortcode actually do anything (right now it does nothing) let’s figure out how we want our hover effect to look in HTML. Here’s what I’m thinking:

<div class="ng-image-hover">
	<img src="image url here" alt="alt text">
	<div class="ng-image-hover-text">
		Text that should appear on hover in here.
	</div>
</div>

So with that in mind, we can now put that into our shortcode. (Note: Don’t actually paste the above code into your plugin yet. That comes next!)

Add the HTML into the shortcode.

Back to the shortcode code!

So find this comment in your shortcode function:

// Stuff to go here!

You can remove that, but that’s where we’re going next, okay? Right in there, add this:

ob_start();
?>
<!-- Your HTML will go here in a minute -->
<?php
return ob_get_clean();

This bit of code lets us add some HTML to our function. Then, at the end (return ob_get_clean();) we send that HTML back to WordPress.

So now all we have to do is paste our HTML where I left the comment for it and start replacing our “placeholders”. So here’s how the whole function will look with just the HTML added in:

function ng_image_hover_shortcode( $atts, $content = '' ) {
	$atts = shortcode_atts( array(
		'image' => '',
		'alt'   => ''
	), $atts, 'hover-effect' );

	ob_start();
	?>
	<div class="ng-image-hover">
		<img src="image url here" alt="alt text">

		<div class="ng-image-hover-text">
			Text that should appear on hover in here.
		</div>
	</div>
	<?php
	return ob_get_clean();

}

But right now that HTML just has placeholders. Like “image url here” isn’t a real image—duh. So what we have to do is replace those with the data from the shortcode. It’s also important to make sure the values are safely put in our HTML.

Replace the ‘placeholders’ with real values.

For the image URL, that means code like this:

<img src="<?php echo esc_url( $atts['image'] ); ?>" alt="<?php echo esc_attr( $atts['alt'] ); ?>">

See how those values correspond to the pieces above? If you remember, the top of our function has this:

'image' => '',
'alt'   => ''

So now we use those same names to actually get them to display. $atts['image'] and $atts['alt']. This is an array, for you more advanced folks.

So we’ve taken care of the image, now let’s do the text. The text works slightly differently because we want to use the $content argument from the function. Like this:

<?php echo do_shortcode( $content ); ?>

We wrap it in do_shortcode() to allow you to use other shortcodes inside of this one.

So what happens if we use the shortcode right now?

If I were to activate the plugin and add my very first shortcode like this:

[hover-effect image="http://localhost/wp/wp-content/uploads/2015/10/the-collector-victoria-scott.jpg" alt="The Collector by Victoria Scott"]He makes good girls...bad. 

Dante Walker is flippin’ awesome, and he knows it. His good looks, killer charm, and stellar confidence have made him one of hell’s best—a soul collector. His job is simple: weed through humanity and label those round rears with a big red good or bad stamp. Old Saint Nick gets the good guys, and he gets the fun ones. Bag-and-tag.

Sealing souls is nothing personal. Dante’s an equal-opportunity collector and doesn't want it any other way. But he’ll have to adjust, because Boss Man has given him a new assignment:

Collect Charlie Cooper’s soul within ten days.

Dante doesn't know why Boss Man wants Charlie, nor does he care. This assignment means only one thing to him, and that’s a permanent ticket out of hell. But after Dante meets the quirky Nerd Alert chick he’s come to collect, he realizes this assignment will test his abilities as a collector…and uncover emotions deeply buried.[/hover-effect]

How would it look??

A bit like this:

Before you get all like, “Girl, that’s not what I wanted!”—I know, I know. We’re not done yet! Take a breather.

But hey, right now we have a shortcode that’s actually working and doing something. If you do a little Inspect Element on that, you’ll see it’s using the HTML we told it to!

Using CSS to pull the whole thing together.

What we need to actually make this work is a little CSS.

First, we need to tell our plugin to add a new CSS file to our site. To do that, add this code at the bottom of your file:

/**
 * Add CSS
 *
 * Includes our stylesheet on the front-end of the site.
 *
 * @return void
 */
function ng_image_hover_css() {
	wp_enqueue_style( 'ng-image-hover', plugins_url( 'ng-image-hover.css', __FILE__ ), array(), '1.0.0' );
}

add_action( 'wp_enqueue_scripts', 'ng_image_hover_css' );

This tells WordPress to add a new stylesheet that’s inside our plugin and is called ng-image-hover.css. So that means we need to create a new file inside our plugin folder with that exact name.

Here’s the CSS that I’m using:

.ng-image-hover {
    display: inline-block;
    position: relative;
}

.ng-image-hover img {
    cursor: pointer;
}

.ng-image-hover:hover .ng-image-hover-text {
    display: block;
}

.ng-image-hover-text {
    background: white;
    border: 1px solid #d2d2d2;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    display: none;
    width: 400px;
    max-height: 100%;
    overflow-y: scroll;
    padding: 1em;
    position: absolute;
    top: 0;
    left: 100%;
}

You can change this to suit your needs, but the main things you need are:

1. Hide the .ng-image-hover-text class.
2. Display the .ng-image-hover-text div when you hover over .ng-image-hover

The rest is up to you!

The final result! *drumroll*

Here’s how it looks when we first render the page:

And if we hover over the image:

Like a boss!!

Download the finished plugin!

I promised at the beginning that you could download the complete plugin if all this code makes your eyes bleed. I get it.

So here it is! Just pop in your email and the complete, ready-to-install plugin is all yours.