The Image Switch

This is an CSS and HTML effect that will change an image or text when you mouse over the item. It requires two elements to sit on top of each other, so absolute position should be used for the hover to work properly.

First in your CSS, create a container:


next, create a container within the


finally, add your hover command in your CSS:


Thats all for your CSS sheet. Now in your html, you have to reference your div class “top” you made in CSS. And you have to indicate which image or text comes first or second. Use this code according to the name of the CSS reference:

<div class=”top”> <div class=”first”>Hover over me to see something happen</div> <div class=”second”><img src=”put your image source here” alt=”” height=”50″ width=”50″ /></div> </div>

So now this:Image

turns into this with a mouseover:Image

Instead of making the timage or text instantly change, you can use a slide option changing your hover tag in the CSS to this: div.first { -webkit-transition: left 1s ease-in-out; left: -however many pixels you want px; }

You can have the slide work in any direction by either use the top property with a positive or negative number, or switching up the left property to use a positive number.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s