Html, Flipcard not working properly and logos overlap problem-CodePudding

The code:

<html>
<style>


.img 
{
  max-width: 100%;
          
}
        
        
.Headerstyle 
{
  color:Black;
  transition: transform .2s;
  text-align: center;
  margin-top: 80vh;

}  
         
.Headerstyle:hover {
              
  transform: scale(1.5);
  transition: 0.2s;
}
 
.HeaderstyleBack 
{
  color:white;
  transition: transform .2s;
  text-align: center;
  margin-top: 80vh;

}  
         
.HeaderstyleBack:hover {
              
  transform: scale(1.5);
  transition: 0.2s;
}




 
.image1 { 
  padding: 10px;  
  transition: transform .2s;
}
         
.image2 { 
  padding: 10px;
  transition: transform .2s;
}
.image1:hover {  
  #border: 4px solid green;
  #border-radius: 15px;
  transform: scale(1.5);
  transition: 0.2s;
}
.image2:hover {  
  #border: 4px solid green;
  #border-radius: 15px;
  transform: scale(1.5);
  transition: 0.2s;
}
  
  
.imageback1 { 
  padding: 10px;  
  transition: transform .2s;
}
         
.imageback2 { 
  padding: 10px;
  transition: transform .2s;
}
.imageback1:hover {  
  #border: 4px solid green;
  #border-radius: 15px;
  transform: scale(1.5);
  transition: 0.2s;
}
.imageback2:hover {  
  #border: 4px solid green;
  #border-radius: 15px;
  transform: scale(1.5);
  transition: 0.2s;
}



   

.footer {
           
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: ##0000ffff;
  color: white;
  text-align: center;
}             
body {
  border-style: solid;
  
  border-width: 15px;
  border-radius: 5px;
  padding: 10px;
  transition: 5s;

}

body {
  margin:  0;
  padding: 0;
  animation: pulse 5s infinite;
}

.container {

  position: relative;
  width: 100%;
  margin: 0px auto; 
  padding: 10px 3px;

}

.Loading {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 7px;
  background: #f1f1f1;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
  border-radius: 4px;
  overflow: hidden;
}

.Loading:after {
  content: '';
  position: absolute;
  background: blue;
  width: 10%;
  height: 100%;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  animation: load 5s infinite;
}

@keyframes load {
  0% {
    left: 0%;
 
  }
  
  25% {
    width: 50%;
    left: 50%

  }
  
  50% {
    width: 10%;
    left: 90%

  }
  
  75% {
    width: 50%;
    left: 0%

  }
  
  100% {
    width: 10%;
    left: 0%
 
  }
}

@keyframes pulse {
  0% {
        border-color: gray;
  }
  
  25% {
        border-color: gray;
  }
  
  50% {
        border-color: gray;
  }
  
  75% {
        border-color: #282828;
  }
  
  100% {
        border-color: #282828;
  }
}



/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 2.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #FFFDD0;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: orange;
  #color: white;
  #background-image: url('');
  background-size: cover;
  transform: rotateY(180deg);
}


</style>
<body >



<div >

    <div >
      <div >
         <div  style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;">
            <p ><b>Get in Touch With Me</b></p>
            <div><div style="display: flex;justify-content: center;">

            <a href="https://stackoverflow.com/"><img  src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
            alt="stackoverflow icon" width="60" height="60"></a>
            <a href="https://www.linkedin.com"><img  src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
            alt="linkedin icon" width="60" height="60"></a>
            </div>
            <div >
            </div>
            <div ></div>
            </div>
          </div>

      </div>
         <div >
          <div  style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;">
            <p ><b>E-MAIL ADRESS</b></p>
            <div><div style="display: flex;justify-content: center;">

            <a href="https://stackoverflow.com/"><img  src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png"
            alt="stackoverflow icon" width="60" height="60"></a>
            <a href="https://www.linkedin.com"><img  src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png"
            alt="linkedin icon" width="60" height="60"></a>
            </div>
            <div >
            </div>
            <div ></div>
            </div>
           </div>
          </div>
    </div>
  
  
</div>

</body>
</html>

Hello friends, I had more than one question:

The logos are on the border and there is an overlap problem. How can I fix this for both sides (front and back)? The shape which I want is available in the image below.
The size of the Stackoverflow logo does not change on both sides when hovering over it.
I want to change the color of the blue bar which is moving on the container to white when it turns back side.

4) How can I make the flip card move more accurately? When a mouse comes to the body part, it immediately turns around.

CodePudding user response：

You can use like this if you want:

<html>
<style>
  .img {
    max-width: 100%;
  }
  
  .Headerstyle {
    color: Black;
    transition: transform .2s;
    text-align: center;
    margin-top: 41%;
  }
  
  .Headerstyle:hover {
    transform: scale(1.5);
    transition: 0.2s;
  }
  
  .HeaderstyleBack {
    color: white;
    transition: transform .2s;
    text-align: center;
    margin-top: 41%;
  }
  
  .HeaderstyleBack:hover {
    transform: scale(1.5);
    transition: 0.2s;
  }
  
  .image1 {
    padding: 10px;
    transition: transform .2s;
  }
  
  .image2 {
    padding: 10px;
    transition: transform .2s;
  }
  
  .image1:hover {
    #border: 4px solid green;
    #border-radius: 15px;
    transform: scale(1.5);
    transition: 0.2s;
  }
  
  .image2:hover {
    #border: 4px solid green;
    #border-radius: 15px;
    transform: scale(1.5);
    transition: 0.2s;
  }
  
  .imageback1 {
    padding: 10px;
    transition: transform .2s;
  }
  
  .imageback2 {
    padding: 10px;
    transition: transform .2s;
  }
  
  .imageback1:hover {
    #border: 4px solid green;
    #border-radius: 15px;
    transform: scale(1.5);
    transition: 0.2s;
  }
  
  .imageback2:hover {
    #border: 4px solid green;
    #border-radius: 15px;
    transform: scale(1.5);
    transition: 0.2s;
  }
  
  .footer {
    position: relative;
    left: 0;
    bottom: 5%;
    width: 100%;
    background-color: ##0000ffff;
    color: white;
    text-align: center;
  }
  
  body {
    border-style: solid;
    border-width: 17px;
    border-radius: 5px;
    padding: 100px;
    transition: 5s;
  }
  
  body {
    margin: 0;
    padding: 0;
    animation: pulse 5s infinite;
  }
  
  .container {
    width: 100%;
    margin: 0px;
  }
  
  .Loading {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 10%;
    background: #f1f1f1;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: -50px;
  }
  
  .Loading:after {
    content: '';
    position: absolute;
    background: blue;
    width: 10%;
    height: 100%;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    animation: load 5s infinite;
  }
  
  @keyframes load {
    0% {
      left: 0%;
    }
    25% {
      width: 50%;
      left: 50%
    }
    50% {
      width: 10%;
      left: 90%
    }
    75% {
      width: 50%;
      left: 0%
    }
    100% {
      width: 10%;
      left: 0%
    }
  }
  
  @keyframes pulse {
    0% {
      border-color: gray;
    }
    25% {
      border-color: gray;
    }
    50% {
      border-color: gray;
    }
    75% {
      border-color: #282828;
    }
    100% {
      border-color: #282828;
    }
  }
  
  .LoadingBack {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 10%;
    background: #000000;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: -50px;
  }
  
  .LoadingBack:after {
    content: '';
    position: absolute;
    background: white;
    width: 10%;
    height: 100%;
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    animation: load 5s infinite;
  }
  
  @keyframes load {
    0% {
      left: 0%;
    }
    25% {
      width: 50%;
      left: 50%
    }
    50% {
      width: 10%;
      left: 90%
    }
    75% {
      width: 50%;
      left: 0%
    }
    100% {
      width: 10%;
      left: 0%
    }
  }
  
  @keyframes pulse {
    0% {
      border-color: gray;
    }
    25% {
      border-color: gray;
    }
    50% {
      border-color: gray;
    }
    75% {
      border-color: #282828;
    }
    100% {
      border-color: #282828;
    }
  }
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  
  .flip-card {
    background-color: transparent;
    width: 100%;
    height: 100%;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }
  /* This container is needed to position the front and back side */
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1.5s;
    transform-style: preserve-3d;
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
  
  .flip-card:active .flip-card-inner {
    transform: rotateY(180deg);
  }
  /* Position the front and back side */
  
  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }
  /* Style the front side (fallback if image is missing) */
  
  .flip-card-front {
    background-color: #FFFDD0;
    color: black;
  }
  /* Style the back side */
  
  .flip-card-back {
    background-color: orange;
    #color: white;
    #background-image: url('');
    background-size: cover;
    transform: rotateY(180deg);
  }
</style>

<body>



  <div >

    <div >
      <div >
        <div  style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;">
          <p ><b>Get in Touch With Me</b></p>
          <div>
            <div style="display: flex;justify-content: center;">

              <a href="https://stackoverflow.com/"><img  src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png" alt="stackoverflow icon" width="60" height="60"></a>
              <a href="https://www.linkedin.com"><img  src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="linkedin icon" width="60" height="60"></a>
            </div>
            <div >
            </div>
            <div ></div>
          </div>
        </div>

      </div>
      <div >
        <div  style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;">
          <p ><b>E-MAIL ADRESS</b></p>
          <div>
            <div style="display: flex;justify-content: center;">

              <a href="https://stackoverflow.com/"><img  src="https://cdn.iconscout.com/icon/free/png-64/stack-overflow-3770615-3147335.png" alt="stackoverflow icon" width="60" height="60"></a>
              <a href="https://www.linkedin.com"><img  src="https://cdn.iconscout.com/icon/free/png-64/linkedin-104-436658.png" alt="linkedin icon" width="60" height="60"></a>
            </div>
            <div >
            </div>
            <div ></div>
          </div>
        </div>
      </div>
    </div>


  </div>

</body>

</html>