Go ahead … hover over that black and white cog image! I DARE YA!
Do you want to do this on your WordPress website? It’s pretty simple with a little bit of code and CSS!
PART 1. Here it is the code behind the images looks like:
<div class="effect"><img class="bw alignnone wp-image-2410" src="https://designmecreative.com/site/wp-content/uploads/cogservicebw.jpg" alt="cog bw" width="277" height="262" /> <img class="color alignnone wp-image-1788 size-full" src="https://designmecreative.com/site/wp-content/uploads/cogservice.jpg" alt="cog color" width="277" height="262" /></div>
If you get confused just thinking about the code – here is the step by step version (color coded and everything):
- Open your page visual editor .
- Add your FIRST image (in my example, the black and white cog) using the “Add Media” button.
- Right next to it do the same for the HOVER image (in my example, the color cog).
- Now for the code part … open the Text editor.
- Add the <div class=”effect”> before the first image and </div> after the second image.
- Within the code of your first image, find the part that refers to the class …. class=”alignnone wp-image …. “. Just afater the first open quote, add the class bw.
- Now find the same class section in the second image and add the class color.
- SAVE.
When you return to the visual editor, the images will appear to be side by side (or one above the other if you have them center aligned). Don’t worry … just move along.
PART 2. Add this CSS to your stylesheet:
From your dashboard go to Appearance > Editor > styles.css should come right up. Insert this before any @media coding near the bottom:
.effect .color, .effect:hover .bw { display: none; }
.effect:hover .color { display: block; }
And there you have it! Save the page and check out your new hover effect!
I’ve been trying to get the effect your code offers for several days. I’ve run into a couple issues I don’t know how to resolve with your code:
1. Images don’t appear to like living on the same line. I’d like to place several images side-bi-side.
2. The bw and color images don’t quite exchange perfectly, the color image is offset a few pixels up, and it takes the rest of the page with it.
I’d sure appreciate it if you could offer some hints.
thanks
jay
Hi Jay –
Good question! As you can see, I’ve accomplished (see below). I copied the entire div and put it directly beside the first div. I added one little extra class to my style sheet for a float left and then added that class to the first div to make sure they floated next to each other:
Addition to style sheet:
.floatleft {float: left;
clear: none;
}
New page code looks like this:
<div class="effect floatleft"><img class="bw alignnone wp-image-2410" src="https://designmecreative.com/site/wp-content/uploads/cogservicebw.jpg" alt="cog bw" width="277" height="262" /> <img class="color alignnone wp-image-1788 size-full" src="https://designmecreative.com/site/wp-content/uploads/cogservice.jpg" alt="cog color" width="277" height="262" /></div><div class="effect"><img class="bw alignnone wp-image-2410" src="https://designmecreative.com/site/wp-content/uploads/cogservicebw.jpg" alt="cog bw" width="277" height="262" /> <img class="color alignnone wp-image-1788 size-full" src="https://designmecreative.com/site/wp-content/uploads/cogservice.jpg" alt="cog color" width="277" height="262" /></div>
The final effect:
Does that work for you?
I was doing something similar to this, except I have 5 images, 2 on the left, 1 in mid, and 2 on the right. when I hover over the top left or right images, they shift the image underneath up by maybe 5 pixels or so…. any idea on how to fix this?
The images that are being replace need to be exactly the same size. Or perhaps there is something in your CSS :hover code that has a padding?
Hi,
Thanks for your explanation. I followed it to the letter, or at least I think I did! But my before and after images are stacked on top of each other in the sidebar.
Also, the images are composed of the front cover and back cover of my book. When people click on them, I’d like it to take them to my book’s Amazon page, instead of just taking them to a larger version of the image. Any advice would be GREATLY appreciated!
Paul
Sounds like you may have an extra line break or something in there. Hard to say without seeing your code. You should be able to add a link by wrapping your primary image in the code.
It seems like WordPress is not allowing the code. When I put the CSS and HTML code, it just displays the two sets (black and white and color) next to each other. No mouseover is experienced.
That typically would be because of a CSS error. Did you get it working?
This is cool, so many code snippets out there don’t actually work on WordPress without extra coding work, this worked straight away, well done.
I want to work out how to make the transition fade now.
OMG! It worked! I was searching for this for a while now and all I was finding was really hard to do.. and now I found your post! It got it on my first try! thank you so much 🙂
😀
Hello, can I ask you some questions about this.. Basically I did everything you said in this post. I have 5 images lined up to each other (up to down). It worked fine in a POST.. But I wanted it in my sidebar. So I copied and pasted the html version of it in a text widget, however the images moves a little bit on hover doing this… you can see it on my websites homepage here: growthcheatsheet .com
Is there any fix for this? Thanks 🙂
Hi Rob. After a quick look, it appears like one of your :hover elements adds padding or margin OR the image itself has added padding and the :hover element zeros it out. I also don’t see any CSS for the .effect tag.
Thank you for being so helpful! 😀
You’re right, the hover effect don’t have some padding on it, so I’ve added one making my css code like this:
.effect .color, .effect:hover .bw { display: none; padding-bottom: 5.5px }
.effect:hover .color { display: block; }
Now it works flawlessly on the site!
Cheers,
Rob
Please help me understand how to add an opacity or other transition to the effect in CSS.
Thanks.
This particular example uses images only instead of opacity effect. You could use an opaque image to replace it.
Can we add a button to the hovered image?
I don’t see why not. 😀