Etikett mit IMG für Ereignis

So habe ich versucht, eine Website zu machen, wo, wenn Sie einen img klicken, ein roter Block, 100% Breite, 100% Höhe, alles abdeckt.Etikett mit IMG für Ereignis

body { 
 
    margin: 0; 
 
    background-color: white; 
 
} 
 

 
h1 { 
 
    font-size: 50px; 
 
    text-align: center; 
 
    font-family: Raleway; 
 
    color: red; 
 
    margin-top: 5%; 
 
} 
 

 
img { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: block; 
 
} 
 

 
.redcover { 
 
    margin-top: -10%; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 110%; 
 
    background: red; 
 
    margin-left: -90%; 
 
    transition: all .3s ease-in-out; 
 
    -webkit-transition: all .3s ease-in-out; 
 
    -moz-transition: all .3s ease-in-out; 
 
    -ms-transition: all .3s ease-in-out; 
 
} 
 

 
#redcovertoggle:checked~.redcover { 
 
    margin-left: 0%; 
 
}

<div class="redcover"></div> 
 
<h1>HERZENSSACHE</h1> 
 
<label> 
 
\t \t <input type="checkbox" for="redcovertoggle"> 
 
\t \t <img src="https://image.ibb.co/d2aN15/heart2.png" alt="redcovertoggleheart"> 
 
\t \t </label>

Ich habe bereits versucht for="redcovertoggle" in der Label-Tag, aber alle es tut, ist die img Anschlag wie ein Etikett handeln machen.

Quelle

2017-09-24 user8385652

es mit CSS zu tun nur Sie :target Selektor und einen Link für das Bild verwenden können, zum Beispiel:

body { 
 
      margin: 0; 
 
      background-color: white; 
 
     } 
 
     h1 { 
 
      font-size: 50px; 
 
      text-align: center; 
 
      font-family: Raleway; 
 
      color: red; 
 
      margin-top: 5%; 
 
     } 
 
     img { 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
      display: block; 
 
     } 
 
     #redcover { 
 
      margin-top: -10%; 
 
      position: absolute; 
 
      width: 100vw; 
 
      height: 100vh; 
 
      background: red; 
 
      left: -100vw; 
 
      z-index: 999; 
 
      transition: left 1s;    
 
     } 
 
     #redcover:target { left:0; }

<body> 
 
    <div id="redcover"></div> 
 
    <h1>HERZENSSACHE</h1> 
 
    <label> 
 
    <a href="#redcover"><img src="https://image.ibb.co/d2aN15/heart2.png" alt="redcovertoggleheart"></a> 
 
    </label> 
 
</body>

Quelle

2017-09-24 11:56:49 MarioZ

Etikett mit IMG für Ereignis

Antwort

Verwandte Themen