Hover Zoom
HejJeg forsøger at implementere billed visningen fra denne side http://mattbango.com/demos/hover-zoom/ på min egen side, men jeg kan ikke få det til at virke i i IE 8.
På min egen test side http://sistage.publicus.com/section/stest virker mouseover fint i alle nyere browsere end IE.
Koden på main page: - Ja scriptet skal i en fil for sig men lad det nu ligge
<div class="box annonce">
<h2>Annoncører</h2>
<div class="viewport">
<a href="http://www.dahlpedersen.dk/">
<span class="light-background">Renault Scenic III 1,9 dCi <em><br>2 zone klima, fartpilot, kørecomputer, infocenter, regnsensor, fjernb. c.lås, sædevarme, højdejust. forsæde, 4x el-ruder, el-spejle, cd/radio, læderrat, LCD farveskærm v. instrumentering, tågelygter, esp, abs, 6 airbags, indfarvede kofangere, justerbare bagsæder, flyborde ved bagsæder, solgardiner i bagdøre, indfarvede dørlister samt sidespejle. aftageligt anhængertræk (1300 kg. m. bremser). Yderst flot og velholdt. KM: 26.000</em> <br>
<price> Kontant kr.: 214.900 </price></span>
<img src="http://images.bilinfo.dk/billeder350/282802029.jpg" alt="DahlPedersen.dk" />
</a>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.viewport').mouseenter(function(e) {
$(this).children('a').children('img').animate({ height: '299', left: '0', top: '0', width: '450'}, 100);
$(this).children('a').children('span').fadeIn(200);
}).mouseleave(function(e) {
$(this).children('a').children('img').animate({ height: '332', left: '-20', top: '-20', width: '500'}, 100);
$(this).children('a').children('span').fadeOut(200);
});
});
</script>
min CSS:
/* --- viewport configuration ---------------------------------------------------------- */
.viewport {
border: 3px solid #eee;
float: left;
height: 299px;
margin: 0 9px 9px 0;
overflow: hidden;
position: relative;
width: 450px;
}
/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
class to the last thumbnail in each row to get rid of the margin-right. */
.no-margin {
margin-right: 0;
}
/* --- Link configuration that contains the image and label ----------------------------- */
.viewport a {
display: block;
position: relative;
}
.viewport a img {
height: 332px;
left: -20px;
position: relative;
top: -20px;
width: 500px;
}
/* --- Label configuration -------------------------------------------------------------- */
.viewport a span {
display: none;
font-size: 2.0em;
font-weight: bold;
height: 100%;
padding-top: 60px;
position: absolute;
text-align: center;
text-decoration: none;
width: 100%;
z-index: 100;
}
.viewport a span em {
display: block;
font-size: 0.50em;
font-weight: normal;
}
.viewport price {
font-size: 0.75em;
color:#FF0000;
}
/* --- Dark hover background ------------------------------------------------------------ */
.dark-background {
background-color: rgba(15, 15, 15, 0.6);
color: #fff;
text-shadow: #000 0px 0px 20px;
}
.dark-background em {
color: #ccc;
}
/* --- Light hover background ----------------------------------------------------------- */
.light-background {
background-color: transparent;
background-color: rgba(255, 255, 255, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddffffff, endColorstr=#ddffffff);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddffffff, endColorstr=#ddffffff)";
color: #333;
text-shadow: #fff 0px 0px 20px;
}
.light-background em {
color:#333333;
}
