Hover Effekt mit opacity(Transparenz) der auch in den IE´s angezeigt wird!

Das wird mit diesen Anweisungen erreicht:

1. filter: alpha(opacity=Hier trägt man den Wert ein);
2. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=Hier trägt man den Wert ein)";
3. opacity: 1; Das ist der Wert für die guten Browser (auch der IE 9!).
4. Den Wert den man im Kompozer für die Transparenz einstellt müssen wir jetzt mal 100 nehmen und ihn als Wert in die Anweisung für die IE´s einsetzten.
5. Bei opacity:1;
6. 100 x 1 = 100 (Opacity=100)
7. Bei opacity:0.3;
8. 100 x 0.3 = 30 (Opacity=30)

Meine Bilder habe ich noch mit Lightbox2 eingebunden.Beim draufklicken wrerden die Bilder in der Lightbox2 angezeigt.

Die Anweisungen:

1. -webkit-border-radius: 3px;
2. -moz-border-radius: 3px;
3. border-radius: 3px;
4. filter: alpha(opacity=100);
5. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
6. müssen mit einem Editor in die CSS Eingetragen werden,da Kompozer diese nicht kennt und sie Löscht.

1. Editoren für die Verschiedenen BS:
2. Microsoft: Notepad++
3. Linux: Bluefish
4. Mac OS: Smultron

Wie das alles sonst Funktioniert könnt ihr im Quelltext und in den css Anweisungen nachsehen.

ul.absatz {
	list-style: none;
	padding: 0;
	margin:0;
}
ul.absatz li {
	width: 220px;
	float: left; display: inline;
	margin: 15px; 
	padding: 0;
	position: relative;
}
ul.absatz li:hover {
    z-index: 99;
}
ul.absatz li img {
	position: relative;
	filter: alpha(opacity=30);
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
ul.absatz li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
ul.absatz li .info {
	position: absolute;
	left: -10px; top: -10px;
	padding: 210px 10px 20px;
	width: 220px;
	display: none;
	background:  #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
ul.absatz li:hover .info {
    display: block;
}
ul.absatz li h2 {
	font-size: 1.2em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; 
	padding: 10px 0;
}
ul.absatz li p {
    padding: 0; 
	margin: 0; 
	font-size: 0.9em;
	color:#333;
}
#hover-bilder{    
	background: #1d1d1d;
	width:750px;
	float:left;
	padding:10px;
}

Hier der Quelltext dazu.

<div id="hover-bilder">
	<ul class="absatz">
  	<li>
 	<a  href="#">
	<img src="hover-bilder/hover01.jpg" alt="bild"></a>
    	<div class="info">
    	<h2>Sardinien 2011</h2>
    	<p>Hier kommt der Text hinein.</p>
    	</div>
  	</li>
  	<li>
 	<a href="#">
	<img src="hover-bilder/hover02.jpg" alt="bild"></a>
    	<div class="info">
    	<h2>Sardinien 2011</h2>
    	<p>Hier kommt der Text hinein.</p>
    	</div>
  	</li>
  	<li> 
	<a href="#">
	<img src="hover-bilder/hover03.jpg" alt="bild"></a>
    	<div class="info">
    	<h2>Sardinien 2011</h2>
    	<p>Hier kommt der Text hinein.</p>
    	</div>
  	</li>
  	<li>
 	<a href="#">
	<img src="hover-bilder/hover04.jpg" alt="bild"></a>
    	<div class="info">
    	<h2>Sardinien 2011</h2>
    	<p>Hier kommt der Text hinein.</p>
    	</div>
  	</li>
  	<li> 	
	<a href="#">
	<img src="hover-bilder/hover08.jpg" alt="bild"></a>
    	<div class="info">
    	<h2>Sardinien 2011</h2>
    	<p>Hier kommt der Text hinein.</p>
    	</div>
  	</li>
  	<li> 	
	<a  href="#">
	<img src="hover-bilder/hover05.jpg" alt="bild"></a>
    	<div class="info">
    	<h2>Sardinien 2011</h2>
    	<p>Hier kommt der Text hinein.</p>
    	</div>
  	</li>
	</ul>
	</div>