Create Floating Image Link using CSS3

Floating Image Link can be placed in the bottom-right corner, lower-left corner, upper-right corner, upper-left corner or in any part of the blog page. Changes in position in the set with the code left, right, top or bottom.

To change the position of Floating Image Link, you can set with left, right, top or bottom code. If you add the value of left, right, top or bottom bigger and biggger, so the Floating Image Link will be move to the middle of page, opposite of the code (left, right, top or bottom).

You can use the image with .gif, .jpg or .png file extention. When using a flash file, so only DIV tag will be used. Put flash file between opening DIV tag and closing DIV tag.

In the lower-left corner you can see the floating image link created using CSS3 with image extensions ". Jpg"!

CSS Code

#pojok {

position:fixed;

left:2px;

bottom:2px;

}

#pojok img {

height:167px;

width:20px;

border:3px solid #888;

padding:1px;

background:#aaa;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

-o-transition:all 1.2s ease-out;

-moz-transition:all 1.2s ease-out;

-webkit-transition:all 1.2s ease-out;

}

#pojok:hover img {

z-index:99;

background:#993300;

border-color:#FF0000;

-o-transform:rotate(380deg) scale(1.3) translate(25px,-30px);

-moz-transform:rotate(380deg) scale(1.3) translate(25px,-30px);

-webkit-transform:rotate(380deg) scale(1.3) translate(25px,-30px);

}

xHTML

<div id="pojok">
<a href="http://gubhugreyot.blogspot.com/" target="_blank" title="You may learn about 500 of blogger tutorial, here!">
<img src="http://3.bp.blogspot.com/_550XeJhg_o8/TNJ_XRkFxMI/AAAAAAAAArM/lRw4C6CPyXU/s200/gubhugreyot167.20.jpg" /></a>
</div>

Put CSS code above ]]></b:skin> and xHTML above </body>