Problem z CSS - galeria zdjęć

0

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

0

jak mniemam coś takiego
https://codepen.io/oknoblich/pen/ELfzd

0
czysteskarpety napisał(a):

jak mniemam coś takiego
https://codepen.io/oknoblich/pen/ELfzd

Widziałem to, jednak nie do końca o to mi chodzi.
Chciałbym by po najechaniu na miniaturę (klasa "small") odsłaniał się obraz (opacity: 1) znajdujący się w klasie "bigimg"
Jak to rozwiązać w cssie?

0

tutaj masz proste rozwiązanie, tylko musisz podmienić linki:
http://jsfiddle.net/mbkgN/
lub
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
czy to będzie działać na allegro, szczerze nie wiem

0
czysteskarpety napisał(a):

tutaj masz proste rozwiązanie, tylko musisz podmienić linki:
http://jsfiddle.net/mbkgN/
lub
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
czy to będzie działać na allegro, szczerze nie wiem

Udało się, dziękuję za pomoc ;)
Zostawiam dla potomnych

<style type="text/css"><!--
#galeria p {text-decoration:none; margin: 0;}
#galeria img {padding:0px; border-style: solid; border-width: 1px;}
#galeria p:hover img.miniatury {border-color:#28f; opacity: 1}
#galeria p img.miniatury {width:106px; height:80px; margin:5px 0 0 5px;opacity: 0.7}
#galeria p img.bigimg {width:550px; height:343px; margin:0; position:absolute; top:5px; left:5px;opacity:0; filter:alpha(opacity=0); transition:opacity 0.7s ease-in;}
#galeria p:hover img.bigimg {border-color:#28f; opacity:1; filter:alpha(opacity=100); transition:opacity 0.7s ease-out;}
--></style>
<div style="width:730px; display:table; text-align:center; margin: 0 auto; color:#444">
	<div id="galeria" style="padding:0 50px 50px 0; zoom:1; font-size:0; position:relative; background:inherit; text-align:right;">
		<div style="float:left; width:555px;height:360px"></div>
		<p><img class="bigimg" style="opacity:1; filter:alpha(opacity=100);" src="http://i.imgur.com/VvbVEwK.jpg"><img class="miniatury" src="http://i.imgur.com/VvbVEwK.jpg"></p>
		<p><img class="bigimg" style="" src="http://i.imgur.com/bg8jo7c.jpg"><img class="miniatury" src="http://i.imgur.com/bg8jo7c.jpg"></p>
		<p><img class="bigimg" style="" src="http://i.imgur.com/Tz8WGCR.jpg"><img class="miniatury" src="http://i.imgur.com/Tz8WGCR.jpg"></p>
		<p><img class="bigimg" style="" src="http://i.imgur.com/hQYmvm6.jpg"><img class="miniatury" src="http://i.imgur.com/hQYmvm6.jpg"></p>
		<p><img class="bigimg" src="http://i.imgur.com/bg8jo7c.jpg"></p>
		<img src="http://i.imgur.com/bg8jo7c.jpg" style="width:1px;height:1px;visibility:hidden">
	</div>
</div>

1 użytkowników online, w tym zalogowanych: 0, gości: 1