Curtain style CSS, Sydney Theme, Hover Effect

Hello
to everyone once again here I am with new QUestions…

Oks so the Front Page is done…

OUTSIDE LINK TO MY PAGE I AM DOING LINK HERE
OUTSIDE LINK TO MY PAGE PHOTOSHOP PROTOTYPE LINK HERE
OUTSIDE LINK TO THE PAGE OF A COOL HOVER EFFECT FOR CSS WORDPRESS I FOUND LINK HERE

I still cant figure out the picture from black and white or as I say, Curtain Mode. Any how I stumbled upon a website that offers what i need but cant seem to activate it or use it…
Here is the website link for more info…
And here are the steps I was told to follow not in that same way…

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

Now That CSS code makes one black and white picture and when the mouse hovers over it to color, of course we will have to have 2 picture sets one black and white and one in full color in order for this css code to work, So my question is what and how can I use it on my framse set… did not quite get the steps and when followed in me end it did not work….

THank you For you time and Help…

Hello there,

Apologies, I can’t clearly follow your steps. I thought it would be better if you make a screencast instead. You could use Droplr app.

Regards,
Kharis

Sure No problem
Did in fact make a video for better understanding if you catch my drift…
Jape this video works…

Dear Zahir,

Thank you for the video. It looks very easy, but I am afraid that it is considered as an advanced customization. Because our support service policy is limited for that, I can’t assist you further to achieve that objective. I’d suggest you to hire a freelancer at Codeable.io or other similar service out there.

Thank you for your understanding.

Regards,
Kharis

wow Great to know that… I was under the impression that the Athems Forums could post any issue in regards customization in anyway and everything is only for a training purposes If needed a freelancer would have hired one at the start I want to learn to do it myself that’s why I ask for help… isn’t that what you do when need advise search for it…

thanks.