How do I link the modal class applied in H2 to the image inside the button? I need to click on the image to display the modal like the H2 does.
You can see the complete code with css and images in this link: link
Thanks in advance.
* {
margin: 0;
padding: 0;
}
body {
font-family: Raleway;
margin: auto;
text-align: center;
width: 1024px;
height: 1845px;
margin-top:0px;
background-color: rgba(0, 0, 0, 0.10);
}
/*------------------------------------------------------*/
#AbreModal{
display: block;
height: auto;
text-align: center;
line-height: 27px;
background-color: rgba(0, 0, 0, 0.0);
color: white;
font-size:0.8em;
font-weight: bolder;cursor: pointer;
text-align:center
}
#AbreModal:hover{
color:gold;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.VentModal{
width: 100%;
height: 100%;
position: fixed;
top: -100%;
left: 0px;
background-color: rgba(0,0,0,.6);
transition: all 1s;
}
#ActivaVentana{
display: none;
}
#ActivaVentana:checked ~ .VentModal{
top: 0%;
}
#CierraModal{
display:none;
width: 40px;
height: 40px;
position: absolute;
top: -20px;
right: -20px;
color: white;
font-size: 1.3em;
background-color: #black;
line-height: 40px;
cursor: pointer;
text-align: center;
border-radius: 50%;
}
#ActivaVentana:checked ~ .contenidoventana{
top: 10%;
}
#ActivaVentana:checked ~ .contenidoventana2{
top: 10%;
}
.contenidoventana{
width: 48%;
height: auto;
background-color: rgba(241,196,15,.9);
padding: 20px;
pointer-events: auto;
position: fixed;
left: 480px;
top: -800px;
transition: all 1s;
text-align: justify;
box-sizing: border-box;
border-radius:10px;
-webkit-box-shadow: -2px 2px 0px 0px rgba(0,0,0,0.30);
-moz-box-shadow: -2px 2px 0px 0px rgba(0,0,0,0.30);
box-shadow: -2px 2px 0px 0px rgba(0,0,0,0.30);
}
.contenidoventana p{
color:#212F3C;
}
.contenidoventana2{
width: 48%;
height: auto;
background-color: rgba(241,196,15,.9);
padding: 20px;
pointer-events: auto;
position: fixed;
left: 480px;
top: -800px;
transition: all 1s;
text-align: justify;
box-sizing: border-box;
border-radius:10px;
-webkit-box-shadow: -2px 2px 0px 0px rgba(0,0,0,0.30);
-moz-box-shadow: -2px 2px 0px 0px rgba(0,0,0,0.30);
box-shadow: -2px 2px 0px 0px rgba(0,0,0,0.30);
}
.contenidoventana2 p{
color:#212F3C;
}
.texto-ventana{
font-size: 0.9em;
width: 50%;
height: auto;
float:left;
padding-top:20px;
padding-right:30px;
margin:auto;
}
.imagen-ventana1{
top:-700px;
width:20%;
float:left;
padding-right:20px;
text-align:center;
}
.imagen-ventana1 img{
padding-top:30px;
width:200%;
height:auto;
margin:auto;
padding-left:30%;
height:60%;
}
.imagen-ventana1 h3{
font-family:Sigmar;
text-align:center;
padding-top:20px;
padding-left:75%;
width:100%;
height:20%;
color:#212F3C;
font-size:1.4em;
}
.imagen-ventana2{
top:-700px;
width:20%;
float:left;
padding-right:20px;
text-align:center;
}
.imagen-ventana2 img{
padding-top:30px;
width:200%;
height:auto;
margin:auto;
padding-left:30%;
height:60%;
}
.imagen-ventana2 h3{
font-family:Sigmar;
text-align:center;
padding-top:20px;
padding-left:75%;
width:100%;
height:20%;
color:#212F3C;
font-size:1.4em;
}
button {
background-color: rgba(0, 0, 0, 0.0);
cursor: pointer;
outline: none;
border:0;
}
/*------------------------------------------------------*/
h1 {padding-top:19px;
color: gold;
font-size:40px;
font-family: Sigmar;
}
p {
color: white;
}
.contenedor {
width: 100%;
max-width: 1024px;
margin:0px auto;
overflow:hidden;
-webkit-box-shadow: -2px 2px 0px 0px rgba(0,0,0,0.30);
-moz-box-shadow: -2px 2px 0px 0px rgba(0,0,0,0.30);
box-shadow: -2px 2px 0px 0px rgba(0,0,0,0.30);
box-sizing:border-box;
/*background-color: rgba(0, 0, 0, 0.10);*/
}
.videos{
float:right;
max-width:60%;
margin-right:20px;
padding-top:30px;
}
.texto-contenido{
margin:0px auto;
color: white;
font-family: Raleway;
font-size:13px;
text-align: justify;
padding-left: 30px;
padding-top: 30px;
box-sizing:border-box;
}
.texto-interno{
float:left;
width:38%;
}
.boton {
width:auto;
padding: 5px;
height: 20px;
color: gold;
font-size:20px;
text-decoration:none;
}
.boton a:link{
color:gold;
text-decoration:none;
}
.boton a:visited{
color:white;
text-decoration:none;
}
.boton a:hover{
color:gold;
text-decoration:none;
}
.tapita-1{
float:left;
padding-left:30px;
padding-top:20px;
padding-right:10px;
padding-bottom:20px;
}
.tapita{
padding-top:20px;
float:left;
padding-right:10px;
padding-bottom:20px;
}
.tapas-todas{
margin-top:40px;
}
.tapita-4{
float:left;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
}
.sello{
padding-top:0px;
float:left;
padding-left:0px;
padding-bottom:20px;
}
.sello img {
-webkit-transition:all .9s ease; /* Safari y Chrome */
-moz-transition:all .9s ease; /* Firefox */
-o-transition:all .9s ease; /* IE 9 */
-ms-transition:all .9s ease; /* Opera */
width:100%;
}
.sello:hover img {
-webkit-transform:scale(1.03);
-moz-transform:scale(1.03);
-ms-transform:scale(1.03);
-o-transform:scale(1.03);
transform:scale(1.03);
}
.sello {/*Ancho y altura son modificables al requerimiento de cada uno*/
width:100%;
height:100%;
overflow:hidden;
}<div class="tapita-1">
<button data-target="#AbreModal"><img src="imagenes/maquina.png" onmouseover="this.style.opacity=0.5" onmouseout="this.style.opacity=1"></button>
<br>
<input type="checkbox" name="ActivaVentana" id="ActivaVentana">
<label for="ActivaVentana" id="AbreModal"><h2>La máquina del tiempo</h2></label>
<label for="ActivaVentana" class="VentModal"> </label>
<div class="contenidoventana">
<label for="ActivaVentana" id="CierraModal">X</label>
<div class="texto-ventana">
<p>Este material tiene por objetivo colaborar en la labor diaria de los docentes, maestros y profesores. Las propuestas de trabajo que se incluyen pueden ser moldeadas de acuerdo a sus expectativas, su experiencia y a las características del grupo con el que trabajen. Se organiza de la siguiente manera:
<br><br><br>
1. Una breve reseña histórico-teórica sobre el género de la novela gráfica, seguida de una serie de actividades sugeridas para comenzar a abordar las particularidades del imbricado vínculo entre texto e imagen.
<br><br>
2. Actividades pensadas para trabajar el texto en sí mismo y la comprensión lectora que requiere ciertas habilidades indispensables para interpretar un relato.
<br><br>
3. Propuestas de reescritura: habilidad para reconocer y dominar otros géneros discursivos, de modo tal que sean capaces de dominar los respectivos registros y léxicos de cada uno.
<br><br>
4. Actividades interdisciplinarias que articulan el trabajo con otras materias, vinculando a alumnos y docentes en un proyecto creativo e innovador. Pueden servir de disparador para compartir espacios extracurriculares que permitan conceptualizar la lectura como actividad de (re)creación y exploración de nuevas miradas y modos de representar el mundo.
<br><br>
Esperamos que este material sea de su agrado y que acompañe de manera fructífera su valiosa e inconmensurable labor educativa diaria.
</p></div>
<div class="imagen-ventana1">
<h3>La máquina del tiempo</h3>
<img src="imagenes/cuadernillos/maquinacuadernillo.jpg"> </div>
</div></div>