Gut so, oder gehts auch einfacher?

[Blubb]

Hallo zusammen,

ich probiere mich gerade etwas in CSS und habe für diesen Zweck eine kleine Seite erstellt, in der Fotos zu sehen sind. Fährt man mit der Maus über ein Foto, wird das Bild abgedunkelt und ein Beschreibender Text wird angezeigt. Das Ganze funktioniert prima. Ich würde nur gerne eure Meinung dazu erfahren: Hättet ihr das anders bzw. vor allem einfacher gelöst?

CSS Code:

			h1{  
				font-size: 18px;  
				font-weight: bolder;  
				font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;  
				text-transform: capitalize;  
			}  
  
            .homepageteaser{  
                margin: 1px 1px;  
				position: relative;  
				height: 270px;  
				float: left;  
				cursor: pointer;  
            }  
			  
			.homepageteaser img{  
				width: 320px;  
				height: 270px;  
				z-index: 0;  
			}  
			  
			.homepageteaser div.headline{  
				position: absolute;  
				top: 0px;  
				left: 0px;  
				height: 270px;  
				width: 320px;  
				color: white;  
				visibility: hidden;  
				z-index: 1;  
				  
			}  
			  
			.homepageteaser div.background{  
				position: absolute;  
				background-color: black;  
				opacity: 0.5;  
				top: 0px;  
				left: 0px;  
				height: 270px;  
				width: 320px;  
				z-index: 2;  
				  
			}  
			  
			.homepageteaser div.headline div.blubb{  
				position: absolute;  
				top: 0px;  
				left: 0px;  
				width: 320px;  
				height: 270px;  
				z-index: 2;  
			}  
			  
			.homepageteaser:hover div.headline{  
				visibility: visible;  
			}  
			  
			.homepageteaser div.headline h1{  
				font-size: 20px;  
				font-weight: bolder;  
				margin: 10px;  
			}  
  
            .clearfix{  
                clear: both;  
            }  
  
            #teasers{  
                position: relative;  
                width: 966px; /* Width of 3 teasers */  
            }

HTML Code:

  
    <div id="teasers">  
		<div class="homepageteaser">  
			<img src="#" />  
			<div class="headline">  
				<div class="background"></div>  
				<div class="blubb">  
					<h1>My Headline</h1>  
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
				</div>  
			</div>  
		</div>  
		<div class="homepageteaser">  
            <img src="#" />  
			<div class="headline">  
				<div class="background"></div>  
				<div class="blubb">  
					<h1>blabla</h1>  
					Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  
				</div>  
			</div>  
		</div>  
		<div class="homepageteaser">  
            <img src="#" />  
			<div class="headline">  
				<div class="background"></div>  
				<div class="blubb">  
					<h1>blubblubb</h1>  
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  
				</div>  
			</div>  
		</div>  
<br class="clearfix" />  
</div>