Wednesday, April 27, 2011

Pure CSS Image Hover

I wanted the image to be enlarged as you hover over the image thumbnail. Most javascripts enlarge's the picture within the same space, and since my images were all in a row and column setting I wanted a "popup" type.

there is the code
.myButtonLink {

display: block;
width: 60px;
text-indent: -99999px;
}
.myButtonLink:hover
{
display: block;
position: absolute;
width: 250px;
background-color:
#aaa; right:500px; color: #FFFFFF; padding: 5px;

}
and the HTML


for this style to work on both Firefox and IE, the html should look
open anchor tag and inside it reference the class to myButtonLink class=myButtonLink href can be hashed like href=#
Open img tag and reference the class again as class=myButtonLink border=0
with src referencing your image file location. Plus add onmouseover=style.width=250 and onmouseout=style.width=60
close img tag and anchor tag

I am unable to write the code on this blogger, it doesnt allow open close tags.

You can look at the code on http://www.spiralstore.com site if you viewcode by right clicking the page.