[SOLUCIONADO] 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);
}

[pzin]

¿Dónde necesitas la imagen? ¿Sería una imagen diferente para cada click?

Aunque ese código es un atentado contra la semántica...

[tesla07]

Iniciado por pzin

¿Dónde necesitas la imagen? ¿Sería una imagen diferente para cada click?

Aunque ese código es un atentado contra la semántica...

Bueno el codigo no lo he hecho yo pero me resulto muy funcional...
La imagen la necesito encima de

Código HTML:

<label for="id1">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label> 

ya que este label es la miniatura asi que yo le quiero poner un reacuadro encima a la miniatura que le hacen click

[pzin]

Bueno, podrías poner una imagen justo donde está esa, con un clase, que por defecto oculte la imagen, y una vez ocurra ese :checked, alterar esas imágenes, para que una se oculte y la que estaba oculta se muestre.

[tesla07]

Iniciado por pzin

Bueno, podrías poner una imagen justo donde está esa, con un clase, que por defecto oculte la imagen, y una vez ocurra ese :checked, alterar esas imágenes, para que una se oculte y la que estaba oculta se muestre.

La verdad no entiendo a que te refieres yo deseo hacer esto con css pero pues dame un ejemplo de lo que tu me dices haber si anda.

[pzin]

Pues, pones otra imagen en el label con otra clase...

Código HTML:

<label for="id1">
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
  <img class="oculta" src="perro.jpg">
</label>
 

A ese clase que por defecto esté oculta...

Código CSS:

label img.oculta {
  display: none;
}
 

Y al hacer :checked, ocultar una imagen y mostrar otra...

Código CSS:

input[name='slide_switch']:checked + label img {
  display: none;
}
 
input[name='slide_switch']:checked + label img.oculta {
  display: inline;
}
 

Lo que dije antes.

Iniciado por tesla07

haber si anda.

haber/a ver.

[tesla07]

Iniciado por pzin

Pues, pones otra imagen en el label con otra clase...

Código HTML:

<label for="id1">
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
  <img class="oculta" src="perro.jpg">
</label>
 

A ese clase que por defecto esté oculta...

Código CSS:

label img.oculta {
  display: none;
}
 

Y al hacer :checked, ocultar una imagen y mostrar otra...

Código CSS:

input[name='slide_switch']:checked + label img {
  display: none;
}
 
input[name='slide_switch']:checked + label img.oculta {
  display: inline;
}
 

Lo que dije antes.



haber/a ver.

Excelente me Funciono a la Perfeccion Gracias.