Poner Imagen encima al hacer click

[tesla07]

Hola.

tengo un slideshow diseñado en html, css y javascript. lo que yo quiero es que cuando se haga click encima de la miniatura se ponga una imagen encima. pero hasta ahora solo he conseguido que me cambia el color del borde asi:

Código:

.slider input[name='slide_switch']:checked+label {
	border-color: #04b0db;
	opacity: 1;
	
}

agradezco su ayuda. dejo el codigo completo para que vean como funciona:

index.html

Código HTML:

<link rel="stylesheet" href="stylo.css" type="text/css" />
<div class="slider">
	<input type="radio" name="slide_switch" id="id1"/>
	<label for="id1">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
	<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
	
	<!--Lets show the second image by default on page load-->
	<input type="radio" name="slide_switch" id="id2" checked="checked"/>
	<label for="id2">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
	<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
	
	<input type="radio" name="slide_switch" id="id3"/>
	<label for="id3">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
	<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
	
	<input type="radio" name="slide_switch" id="id4"/>
	<label for="id4">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
	<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
	
	<input type="radio" name="slide_switch" id="id5"/>
	<label for="id5">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
	<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
</div>

<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script> 

estilo.css

Código:

/*Time for the CSS*/


.slider{
	width: 100%; /*Same as width of the large image*/
	
	position: relative;
	/*Instead of height we will use padding*/
	padding-top: 320px; /*That helps bring the labels down*/
	
	
	/*Lets add a shadow*/
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}


/*Last thing remaining is to add transitions*/
.slider>img{
	position: absolute;
	left: 0; top: 0;
	transition: all 0.5s;
	width: 100%; /*Same as width of the large image*/
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	/*Lets add some spacing for the thumbnails*/
	margin: 0px 0 0 1px;
	border: 3px solid #999;
	
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	
	/*Default style = low opacity*/
	opacity: 0.6;
}

.slider label img{
	display: block;
	width:215px;
	height:140px;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
	border-color: #04b0db;
	opacity: 1;
	
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}