new css trick to show/hide content

I just found out a new way of showing/hiding images( In this tutorial we will talk about images only. But the technique can be applied to any element)

Well first we need an image . Well most of you would like to use photoshop or other image editing app.

Go For it !!!

After you have an image .

1. See the width and height of the image .
2. Now write an css rule for the image
3. We will only use image tag no id (to make it simple)

Css:-

img{

position:absolute;

width:400px;

height:200px;

left:-350px;

top:10px;

}

Note for this tutorial i took an image of width- 400px and height-200px . And i am positioning it at 10px from the top and -350 px from the left ( That’s the trick) .

If we specify a negative value to left it will start from that value but we cant see that part of the image. I uses -350px because i only want to show 50px of image portion on my page . Rest 350px will not be displayed on the page.

Now comes the hover effect

css:-

img:hover{

left:0px;

}

Just this much of code. Here we specify that image should be 0px from the left so that it can visible on the page.

By doing this we can see full image . And when we release the mouse pointer from image to other part of body image again goes to -350px from the left and only 50px image is visible.