Archiv-Modus von Basti1012 Lösungspage

Habe beim Googeln dieses Bild gefunden. <img class="vorschau" src="image/layout_helfen.png" alt="bild"> Kann man das mit HTML und CSS umsetzen oder ist das ein Fake Bild

Code

                                    
                                 <!doctype Html>
<html lang="de">
  <head>
<style>
 *{
  margin:0;
  padding:0;
  overflow:hidden;
}

body{
  display:flex;
  flex-direction:column;
}
main{
  display:flex;
  min-height:calc(100vh - 40px - 40px);
}
nav{
  background:green;
  height:40px;
}
#left{
   flex:4;
}
 
#rechts {
flex:1;
  background:yellow;
}


footer{
  background:blue;
  height:40px;
}
 




input{
  position:absolute;
  left:-1220px;
}
.img1,.img2,.img3{
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  margin:10px;
  display:none;
}
 
#helfer{
  width:70%;
  height:100%;
 
  float:right;
  position:relative;
 top:-92%;
  background:blue;
}
#all,form{
  width:100%;
  height:100%;
}

#lab1,#lab2,#lab3{
  height:29.6%;
  width:30%;

  display:block;
  cursor:pointer;
border:2px solid black;
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-image:url('/image/placeholde_400x236.png');
}
#bild1:checked  ~ #helfer .img1{
  display:block;
}

#bild2:checked   ~ #helfer .img2{
  display:block;
}

#bild3:checked   ~ #helfer .img3{
  display:block;
}
</style>
 
</head>
<body>
 <nav>
   Navigation
  </nav>
  <main>
<div id="left">
<div id="all">   
     <form>
     <input type="radio" name="checken" id="bild1"> <label for="bild1" id="lab1"></label> 
     <input type="radio" name="checken" id="bild2"> <label for="bild2" id="lab2"></label> 
     <input type="radio" name="checken" id="bild3"> <label for="bild3" id="lab3"></label> 
<div id="helfer">
<img class="img1" alt="Alan: The eBay OAP" src="/image/placeholde_400x236.png">
     <img class="img2" title="Foley work" alt="" src="/image/placeholde_400x236.png">
        <img class="img3" title="I Am Your Father" alt="" src="/image/placeholde_400x236.png">
</div>
     </form>
</div>
      </div>
    <div id="rechts">
    </div>
  </main>
     <footer>
      fotter
    </footer>
</body>
</html>

basti1012.bplaced.net

Kann mir einer bei diesen Layout helfen

Code