/* CSS Document */ #elekt{margin-top:-300px;} #term{margin-top:-170px;} #gallery {margin-top:-420px;} /* This is the pic to display when the hover action occur over the li that contains the thumbnail  */ #gallery tr td .pic, #term tr td .pic, #elekt tr td .pic{ /* Animation with transition in Safari and Chrome */ -webkit-transition: all 0.6s ease-in-out; /* Animation with transition in Firefox (No supported Yet) */ -moz-transition: all 0.6s ease-in-out; /* Animation with transition in Opera (No supported Yet)*/ -o-transition: all 0.6s ease-in-out; /* The the opacity to 0 to create the fadeOut effect*/ opacity:0; visibility:hidden; position:absolute; margin-top:0px; margin-left:-10px; /* box shadow effect in Safari and Chrome*/ -webkit-box-shadow:#272229 2px 2px 10px; /* box shadow effect in Firefox*/ -moz-box-shadow:#272229 2px 2px 10px; /* box shadow effect in IE*/ filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
/* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/ box-shadow:#272229 2px 2px 10px; } #gallery tr td .mini:hover, #term tr td .mini:hover, #elekt tr td .mini:hover{ cursor:pointer; } /* This create the desired effect of showing the imagen when we mouseover the thumbnail*/ #gallery tr td:hover .pic, #term tr td:hover .pic, #elekt tr td:hover .pic { /* width and height is how much the picture is going to growth with the effect */ /*width:100%; height:100%;*/ opacity:1; visibility:visible; float:right; }