Witam forumowiczów
Mam problem z stworzeniem galerii zdjęć do szablonu na allegro.
Chciałbym by po nakierowaniu myszką na miniaturę w okienku głównym odsłaniał się duży obraz.
Powstał taki zlepek kodu:
<style>
.slider{
width: 740px;
position: relative;
padding-top: 492px;
margin: 10px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider > span{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider p.small {
margin: 10px 0 0 35px;
border: 2px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
}
.slider span {
opacity: 0.2;
transition: all 0.5s ease-out;
}
.slider p.small img{
display: block;
}
.slider p.small:hover {
opacity: 1;
}
.slider p span.bigimg img{
border: 0px;
margin: 0px;
max-width:100%;
}
.slider p:hover span.bigimg {
visibility: visible;
opacity: 1;
z-index: 2;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
span.bigimg:target {
visibility: visible;
opacity: 1;
}
</style>
<div class="slider">
<p>
<p class="small">
<img src="http://i.imgur.com/VvbVEwK.jpg" width="100"/>
</p>
<span class="bigimg">
<img src="http://i.imgur.com/VvbVEwK.jpg"/>
</span>
</p>
<p>
<p class="small">
<img src="http://i.imgur.com/bg8jo7c.jpg" width="100"/>
</p>
<span class="bigimg">
<img src="http://i.imgur.com/bg8jo7c.jpg"/>
</span>
</p>
<p>
<p class="small">
<img src="http://i.imgur.com/Tz8WGCR.jpg" width="100"/>
</p>
<span class="bigimg">
<img src="http://i.imgur.com/Tz8WGCR.jpg"/>
</span>
</p>
<p>
<p class="small">
<img src="http://i.imgur.com/hQYmvm6.jpg" width="100"/>
</p>
<span class="bigimg">
<img src="http://i.imgur.com/hQYmvm6.jpg"/>
</span>
</p>
<p>
<p class="small">
<img src="http://i.imgur.com/bnxKk8y.jpg" width="100"/>
</p>
<span class="bigimg">
<img src="http://i.imgur.com/bnxKk8y.jpg"/>
</span>
</p>
</div>
Proszę o pomoc