foto html - css     . Cliparts - Mouse-over foto

    Voorbeeld

Ga met je muis over de foto  

In de css

.rollover_img {
width: 250px;
height: 200px;
background-image: url(jou foto);
background-position: top;
font:13px normal Arial, Helvetica, sans-serif;
line-height:18px;
float:left;
margin:0 10px 10px 0;} .rollover_img a {
color: #fff;
width: 250px;
height: 200px;
display: block;
text-decoration: none;}

.rollover_img a:hover {
background:#000;
opacity:.60;
filter:alpha(opacity=60);}

.rollover_img a span {
display: none;
width: 250px;
padding:5px;}

.rollover_img a:hover span {
display: block;
}

Tussen de bodytags

<div id="container">
<div class="rollover_img"><a title="Naam foto">
<span>
jou tekst
</span>
</a></div>
</div>

end
terug
home