CSS Garden

Tipps und Tricks über Stylesheets

 

Picture Box

Eine etwas andere Möglichkeit zum Anzeigen von Bilder. Dies ist ein einfaches Beispiel, wie die Eigenschaften 'display:none' und 'display:block' eingesetzt werden können.

Bei 'hover' kann natürlich auch anstelle von einem Bild - wie in diesem Beispiel - Text angezeigt werden.

CSS-Teil

.button
{
background-color: #99CCFF;
width:100px;
margin-bottom: 2px;
}

.button a
{
color:#000066;
border:1px solid black;
display: block;
text-decoration:none;
padding:5px;
}

.button a:hover
{
width:365px;
}

.button a span {display:none;}

.button a:hover span
{
background:#ffffff;
border: 0 none;
display:block;
padding:10px;
}

.button img
{
border: 0 none;
}

HTML-Code

<div class="button">
<a href="#">Sardinien<span><img src="sardinien.jpg"/></span></a>
</div>
<div class="button">
<a href="#">Elba<span><img src="elba.jpg"/></span></a>
</div>
<div class="button">
<a href="#">Korsika<span><img src="korsika.jpg"/></span></a>
</div>

Original Code-Konzept von http://css.fractatulum.net/

 

>Zurück

 

© 1997 - 2019