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 div.top container:

Image

next, create a container within the div.top:

Image

finally, add your hover command in your CSS:

Image

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.top:hover 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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s