Build Your Own Business Website header image

How to Create Thumbnail Images that Display Full Size When You Hover Over Them

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This member asks how to put “thumbnail” images on a page that will display the full image when you hover over them. I demonstrate how to use the plugin WP Image Tooltip to create this effect.

Video Transcript

And we’re just going to dive right into the middle of this here and start off with a question that was asked on the forum by Eldo. He wants to make thumbnail images. He wants to make images on this site that expands when he hovers over them.

So for example, let’s just go to this page here where I’ve done this. He wants essentially this effect where you hover the image and when you hover over the image, the other image expands to… or the image expands when you hover over it. You know there are lots and lots and lots of plugins where the image can expand if and when you click on them. But as I discovered trying to answer this question, they are few and far between when they are supposed to open up when you hover.

So we are going to take a look at the way I found to solve this problem. And what we’re going to do is we’re going to install a plugin. Actually, the first thing we’re going to do is go to this page and delete the code that I used there. Thumbnail expand on hover and we’re just going to delete this stuff. We’re doing this in WordPress 3.2 release candidate 1 so very close to being our 3.2 release.

So we’re going to look for a plugin called WP Image Tool Tip. And it’s this image right here, WP Image Tool Tip is the image plugin that we’re going to use. You can see it’s already telling me that I have it installed. And when you have this installed, there’s really nothing for you to do except to install it. There aren’t any settings or anything like that you have to do.

However, if we go take a look at the install plugin section and look at this plugin, it says just upload an image using a post or a page editor and insert a link into that image and put the class attribute tool tip. And voila! You have image tool tips. So that’s what we’re going to do.

So we’re going to go back to our page that I am using for this purpose and select edit. And I’m going to insert a couple of images from the Media Library. So I’m just going to hit…yeah, I’m going to hit… actually, let’s do it from the Visual Library… Visual Settings.

So we’ll go ahead and select Add Image and we’ll do it from the Media Library. I’m going to start off with this one, Gallery 6 and what I’m going to insert is not the full image. I am going to insert the thumbnail image. I’m going to float it to the left and then I want to leave the link URL here to the file itself so the link that’s in this link URL is actually to the large picture location. And I’ll just hit save all changes and actually, not save all changes but insert into post. I’m sorry, my mistake.

Okay so now we have that little thumbnail image inserted in here. We may as well as go ahead and then right click on it and select Edit Image. And then in the Advanced Settings here, we are going to add this CSS class. All we have to do is type in Tool Tip, right there. And say update and then say update again and let’s view this page. Okay, so far so good. Didn’t work.

Let’s take a look at it in HTML. The href is…oh the image has a class of tool tip, my mistake. Let’s see, so we’ll just go ahead and take that out of there. I guess we do have to do it from the back end.

So we’re in the HTML view. Let’s try it one more time from here. Let’s see if there’s some way I can change that. So we have this link URL. If we go to our Advanced Settings…Advanced Link Settings. That’s where I want to do it. In the link settings, I want to type tool tip. Okay and then say update and then update and then refresh the page. And now, when I hover over the image, the image pops up.

And so, let’s try that one more time. Here we are back here and we’re going to insert an image from the Media Library. And this time, we’ll go ahead and insert image number 5 and we are going to insert a thumbnail. It’s going to be left aligned and we’ll insert it into the post. And then we’ll select it and go to the Advanced Settings and go back down here to CSS class and add tool tip. And hit update and then hit update again and then refresh it. And now we have 2 images whose pictures automatically expand when we hover over them.
Now notice that funny green border? That’s something I want to get rid of. Now if you want to actually play with the code, it’s relatively simple to add custom styling to the CSS for this so that you could frame it or you could do all different kinds of things with CSS. But I want to do is just get rid of that green stuff. And so the only thing we’re going to do with code is delete it in this case.

So we’re just going to come back over here to our dashboard and I’m going to go down to this installed plugins and I’m going to go to the Image Tool Tip and select edit. And then I want to edit the CSS file. So we’re at the WP Image Tool Tip jquery clue.tip.css and if we select that and really, we can just go through this whole thing and delete all of that. Say update. I know it’s kind of scary but delete all of that, say update, refresh this. And now when you hover over it, you don’t see any of that green stuff.

And you know, if you didn’t, if you felt like that was too surgical or not surgical enough, if you felt like it was too global a change, you could, in fact, just reinstall the plugin and then it would give you back the CSS file again. But I think for a non-coder, this is the perfect application here. It works very nicely and it’s nice and lightweight. It does pretty cool stuff and it relies on the Media Library.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment