Voor alle moderne browsers is deze procedure een pure CSS-aangelegenheid. Om IE (t/m versie 9) nog enigszins "aan de praat te houden", is er een klein stukje javascript toegevoegd om een vervangende (native) transitie toe te voegen (te kunnen starten..). Je kan dat natuurlijk gewoon weglaten en de IE gebruikers gewoon negeren. Toch raad ik je aan om ook de IE-bezoekers een goede gebruikers-ervaring te geven. Het is niet hún schuld dat (zelfs in versie 9) IE niet helemaal "in de pas loopt". Voor wat betreft de bezoekers die met oude Opera- en Mozilla-browsers "langskomen", zou ik me niet al te veel zorgen maken. Zij zullen niet door hebben dat er geavanceerde graphische techniek op de pagina beschikbaar is. Daar komen ze wel achter als zij hun browser (op een goede dag) naar de laatste versie upgraden... Plaats de stylesheet in de head-sectie van de pagina, en de overige code in de body.
<style type="text/css">
.open-effect{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
float:left;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s}
.open-effect img{
padding:10px;
border:1px solid #808080}
.open-effect:hover{
-webkit-transform:scale(1.0);
-webkit-box-shadow:0px 0px 30px #bbb;
-moz-transform:scale(1.0);
-moz-box-shadow:0px 0px 30px #bbb;
-o-transform:scale(1.0);
-o-box-shadow:0px 0px 30px #bbb}
.open-effect .css_image_effect{
width: 100%;
background-color:rgb(0, 0, 0);
color:inherit;
position: absolute;
height: 100%;
opacity:0.6;
cursor:pointer;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s}
#image_effect_open:hover .css_image_effect{
height:0%;
margin-top:125px}
.clear_both{
clear:both}
</style>
<!--[if IE]>
<style type="text/css">
.css_image_effect{
display:none}
#image_open{
-ms-filter:"progid:DXImageTransform.Microsoft.Stretch(duration=0.5, stretchStyle=SPIN)";
filter:progid:DXImageTransform.Microsoft.Stretch(duration=0.5, stretchStyle=SPIN);
width: 100%;
height:100%}
#image_open img{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50)}
#image_open:hover img{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100)}
</style>
<![endif]-->
<div class="open-effect" id="image_effect_open">
<div class="css_image_effect" ></div>
<div id="image_open" onmouseover="javascript:ie_image_effect();">
<img id="image_open_ie" src="css-effect-open.jpg" height="245" width="220" alt="image effect open css" />
</div>
</div>
<div class="clear_both"></div>
<script>
var image_open=document.getElementById("image_open");
function ie_image_effect(){
if(image_open.filters.item("DXImageTransform.Microsoft.Stretch").status!==2){
image_open.filters[0].apply();
image_open.filters[0].play();
}
}
</script>