flipcards

by Mentaldiarrhoe

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 <meta charset="UTF-8">
</head>

<body>
 <section id="portfolio">
 <div class="example-window">
        <h3>Pflegegrad 1</h3>
           <p> 12,5 bis 26,5 Punkte</p>
           <p> Geringe Beeinträchtigung der Selbstständigkeit</p>
   
           <div id="info1" class="overlay"></div>
                                   
         	
  </div>
  <div class="example-window">
        <h3>Pflegegrad 2</h3>
           <p> 12,5 bis 26,5 Punkte</p>
           <p> Geringe Beeinträchtigung der Selbstständigkeit</p>
   
           <div id="info2" class="overlay"></div>
                                   
         	
  </div>
  </section>

</body>
</html>

CSS

:root {

  --content_p1: "In den Pflegegrad 2 werden alle Menschen eingestuft, welche bisher in die Pflegestufen 0 und 1(ohne eingeschrankte Alltagskompetenz) eingeteilt waren.In den Pflegegrad 2 wird man eingeteilt, wenn man vom Medizinischen Dienst der Krankenversicherung. zwischen 27 und < 47,5 Punkten anerkannt bekommen hat. Werden Pflegebedurfte mit Pflegegrad 2 von Privatpersonen gepflegt, erhalten sie eine monatliche ambulante Geldleistung von 316 €. Werden sie ambulant von einem Pflegedienst gepflegt, erhalten sie ambulante Sachleistungen bzw. Pflegesachleistungen in Hohe von 689 €. Bei Heimpflege erhalten sie stationare Leistungsbetrage in Hohe von 770 €";
}

.example-window {
  flex: 0 0 auto;
  margin-bottom: 50px;
  position: relative;
  border: solid 3px transparent;
  background-color: #fff;
  color: #474747;
  text-align: center;
  padding: 30px 30px 150px;
  border-radius: 10px;
  width: 300px;

  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: color 3s, box-shadow 3s;
}

#info1::after,
#info2::after {
  text-align: left;
  padding: 15px;
  position: absolute;
  content: "mehr erfahren";
  top: 80%;
  left: calc(50% - 50px);
  width: 100px;
  height: 20px;
  color: #474747;
  line-height: 1.6em;
  background: #fff;
  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.0);
  border-radius: 10px;
  transition: top 1s, width 0.5s, height 1s, box-shadow 2s, border-radius 3s;



}

#info1:hover::after,
#info2:hover::after {
  animation-name: changeContent;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  padding: 50px 80px 100px;
  top: 0;
  left: calc(20% - 75px);
  width: 100%;
  height: 100%;
  color: #474747;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  z-index: 99;



}

.example-window:hover {
  /*  transform: rotateY(180deg);*/

}

@keyframes changeContent {
  0% {
    content: "";
    color: #fff;


  }

  50% {
    color: #fff;
    opacity: 0.7;

  }

  100% {
    content: var(--content_p1);
    opacity:...