Lösungen ,

test-inhalt2.php

Quell Code

<style>
h1{
color:white;
text-align:center;
width:50%;
padding:10px;
margin-left:calc(50% - 25% - 20px);
}


.hexagon {
  position: absolute;

  width: 100px; 

  height: 57.74px;

  background-color: #64C7CC;

  margin: 28.87px 0;

}



.hexagon:before,

.hexagon:after {

  content: "";

  position: absolute;

  width: 0;

  border-left: 50px solid transparent;

  border-right: 50px solid transparent;

}



.hexagon:before {

  bottom: 100%;

  border-bottom: 28.87px solid #64C7CC;

}



.hexagon:after {

  top: 100%;

  width: 0;

  border-top: 28.87px solid #64C7CC;

}



#all{

  height:300px;

  width:320px;

  position:absolute;

  left:500px;

  top:220px;

 

}

#a{

  position:absolute;

  top:0;

  left:55px;

  background:black;

}

#a:before {

  bottom: 100%;

  border-bottom: 28.87px solid black;

}



#a:after {

  top: 100%;

  width: 0;

  border-top: 28.87px solid black;

}

#b{

  position:absolute;

  top:0;

  left:165px;

  background:blue;

}

#b:before {

  bottom: 100%;

  border-bottom: 28.87px solid blue;

}



#b:after {

  top: 100%;

  width: 0;

  border-top: 28.87px solid blue;

}

#c{

  position:absolute;

  top:90px;

  left:110px;

  background:red;

}

#c:before {

  bottom: 100%;

  border-bottom: 28.87px solid red;

}



#c:after {

  top: 100%;

  width: 0;

  border-top: 28.87px solid red;

}



#d{

  position:absolute;

  top:90px;

  left:0px;

  background:orange;

}

#d:before {

  bottom: 100%;

  border-bottom: 28.87px solid orange;

}



#d:after {

  top: 100%;

  width: 0;

  border-top: 28.87px solid orange;

}

#e{

  position:absolute;

  top:90px;

  left:217px;

  background:yellow;

}

#e:before {

  bottom: 100%;

  border-bottom: 28.87px solid yellow;

}



#e:after {

  top: 100%;

  width: 0;

  border-top: 28.87px solid yellow;

}

#f{

  position:absolute;

  top:180px;

  left:55px;

    background:#123456;

}

#f:before {

  bottom: 100%;

  border-bottom: 28.87px solid #123456;

}



#f:after {

  top: 100%;

  width: 0;

  border-top: 28.87px solid #123456;

}

#g{

  position:absolute;

  top:180px;

  left:165px;

  background:grey;

}

#g:before {

  bottom: 100%;

  border-bottom: 28.87px solid grey;

}



#g:after {

  top: 100%;

  width: 0;

  border-top: 28.87px solid grey;

}

.beweg{

  position:absolute;

  left:105px;

  top:105px;

  animation:beweg forwards linear 1s 1 0.1s;

}



@keyframes beweg{

  0%{

    transform:scale(1);

     z-index:0;

   

  }

  100%{

    transform:scale(2);

   z-index:1;

    left:100px;

    top:100px;

  }

}



.opa{

 animation:opacity forwards linear 1s 1 0.1s; 

}



@keyframes opacity{

  0%{

opacity:1;

   

  }

  100%{

opacity:0;

  }

} 





</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 <body>
 <div  id="all"><div id="a"class="hexagon"></div>
 <div id="b" class="hexagon"></div>
<div id="c" class="hexagon"></div>
<div id="d" class="hexagon"></div>

<div id="e" class="hexagon"></div>

<div id="f" class="hexagon"></div>

<div id="g" class="hexagon"></div>

</div>  



  <script>

$('.hexagon').hover(function(){

  hat=$(this).hasClass('beweg');

  

  n=this.id;

  if(n=='a'){

 $('#b,#c,#d,#e,#f,#g').addClass('opa');

  }else  if(n=='b'){

 $('#a,#c,#d,#e,#f,#g').addClass('opa');

  }else  if(n=='c'){

 $('#b,#a,#d,#e,#f,#g').addClass('opa');

  }else  if(n=='d'){

 $('#b,#c,#a,#e,#f,#g').addClass('opa');

  }else  if(n=='e'){

 $('#b,#c,#d,#a,#f,#g').addClass('opa');

  }else  if(n=='f'){

 $('#b,#c,#d,#e,#a,#g').addClass('opa');

  }else  if(n=='g'){

 $('#b,#c,#d,#e,#f,#a').addClass('opa');

  }else {}

  

 if(hat==true){

    $(this).removeClass('beweg'); 

   $('div').removeClass('opa');

  }else{

$(this).addClass('beweg');

  }

  

  

})

 

 </script>

</body>