Furoya-1

by kseso

HTML

<h2>Click en la muesca del portarretratos para cambiar la foto.</h2>

<div id=portaRetrato>

<a href=#foto1><img src="http://imageshack.com/a/img685/2254/brillos.gif" id=foto0></a>
<a href=#foto2><img src="http://imageshack.com/a/img855/3555/89an.jpg" id=foto1></a>
<a href=#foto3><img src="http://imageshack.com/a/img856/5730/norbertogomez.jpg" id=foto2></a>
<a href=#foto4><img src="http://imageshack.com/a/img109/3200/barbarakaplan.jpg" id=foto3></a>
<a href=#foto5><img src="http://imageshack.com/a/img687/2534/marialuzras.jpg" id=foto4></a>
<a href=#foto6><img src="http://imageshack.com/a/img195/148/guadalupegomezpintus.jpg" id=foto5></a>
<a href=#foto7><img src="http://imageshack.com/a/img825/6176/alejandronoguera.jpg" id=foto6></a>
<a href=#foto8><img src="http://imageshack.com/a/img208/5394/rafaelgil.jpg" id=foto7></a>
<a href=#foto0><img src="http://imageshack.com/a/img521/8642/omarpanosetti2.jpg" id=foto8></a>

<div id=marcoI></div><div id=marcoD></div>
</div>

CSS

body {
background-color: bisque; 
}
h2 {text-align: center;}
#portaRetrato {
position: relative; 
width: 640px; height: 480px; 
margin: auto; 
background-color: silver; 
}

#marcoI {
position: absolute; 
left: 0; top: 0; 
width: 50%; height: 100%; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
border: 30px inset maroon; 
border-right: 0 inset transparent; 
border-radius: 0 50px 0 0 / 0 30px 0 0;
}

#marcoD {
position: absolute; 
left: 50%; top: 0; 
width: 50%; height: 100%; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
border: 30px inset maroon; 
border-left: 0 inset transparent; 
border-radius: 50px 0 0 0 / 30px 0 0 0;
}

#foto0, #foto1, #foto2, #foto3, #foto4, #foto5, #foto6, #foto7, #foto8 {
display: block; 
position: absolute; 
top: -700px; left: 0; right: 0;
margin: auto; 
width: auto; height: 480px; 
cursor: pointer; 
}

#foto0 {
top: 0; 
}

#foto0:target, #foto1:target, #foto2:target, #foto3:target, #foto4:target, 
#foto5:target, #foto6:target, #foto7:target, #foto8:target {
transition: top 3s ease;
top: 0;
}

#foto1:not(:target), #foto2:not(:target), #foto3:not(:target), 
#foto4:not(:target), #foto5:not(:target), #foto6:not(:target), 
#foto7:not(:target), #foto8:not(:target) {
transition: top 2.5s ease;
top: -700px;
}