foto html - css     . List - Foto omhoog

Omschrijving   Voorbeeld

Dit is ook een list. Als je met je muis op te foto gaat staan (niet klikken) dan is het net of hij omhoog komt. Alles is aanpasbaar.  

In de css

body {
background: #FFFFFF;
font-size: 14px;
color: #000000;
text-decoration: none;}
.tekst {font-size: 14px;
color: #000000;
text-decoration: none;}
.koptekst {font-size: 26px;
color: #000000;
text-decoration: none;}
div {
width: 500px;
margin: 0 auto;
overflow: auto;}
ul {
list-style-type: none;}
li img {
float: left;
margin: 5px;
border: 4px solid #F0F0EB;
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;}
li img:hover {
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
box-shadow: 0px 0px 10px rgba(0,0,0,0.9);}

Tussen de bodytags

<div>
<ul>
<li><a href="#"><img src="img/foto" width="100" height="100"></a></li>
<li><a href="#"><img src="img/foto" width="100" height="100"></a></li>
<li><a href="#"><img src="img/foto" width="100" height="100"></a></li>
<li><a href="#"><img src="img/foto" width="100" height="100"></a></li>
<li><a href="#"><img src="img/foto" width="100" height="100"></a></li>
<li><a href="#"><img src="img/foto" width="100" height="100"></a></li>
</ul>
</div>

end
terug
home