Fixed Price Projects          Flexibele IT oplossingen

Software op maat              Web Applications

Dit is een geweldige CSS voor een mooie en snelle image popup (ik heb hem zelf niet bedacht, maar de credits staan er in)

de css:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -100px;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>

het gebruik:

<a class="thumbnail" href="#thumb">
<img src="images/kleine_foto.jpg" border="0" />
<span><img src="images/grote_foto.jpg" /></span></a>

Categorie: .NET
Actions: E-mail | Permalink |

waardering