@-a- teste hover pasta 5-8 não funcionou

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

before the first image and

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.

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; }


.effect .color, .effect:hover .bw { display: none; }
.effect:hover .color { display: block; }
.floatleft {
float: left;
clear: none;