Coole animierte Bio Karte

Wenn man Personen vorstellen will, dann möchte man das ja nicht unbedingt nur mit einem Bild und einem kurzen Text machen, sondern es soll ein wenig auffallen. Und im heutigen Beitrag zeige ich euch genau, wie das geht. Ihr habt am Schluss ein Bild und wenn ihr mit der Maus darüber fahrt, dann gibt es eine coole kleine Animation, die alle Infos über die Person zeigt.

Wir leben heute in einer Welt, in der wir mehr als nur einen Namen und ein Bild haben, sondern wir haben Social-Media-Kanäle, Webseiten usw. Wenn man nun also jemanden vorstellen möchte oder ein ganzes Team, dann macht es Sinn, dass man diese Infos auch anzeigt (Personal Branding usw.).

Heute möchte ich euch zeigen, wie man so eine Bio-Karte designen kann. Dafür braucht man nicht viel, nur ein paar Zeilen HTML und ein bisschen CSS und schon hat man diesen coolen Effekt.

Video

Video

HTML

<div class="column">
      <div class="card">
        <div class="pro-pic" style="background-image: url(avatar.jpg)" ;></div>
        <div class="description-wrap">
          <div class="description">
            <h3>Eric Mächler</h3>
            <h4>Youtuber</h4>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia magni unde, eius provident fuga modi suscipit qui rem animi corporis.</p>
            <ul>
              <li>
                <a href="#"><img src="mastodon.png" /></a>
              </li>
              <li>
                <a href="#"><img src="linkedin.png" /></a>
              </li>
              <li>
                <a href="#"><img src="youtube.png" /></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

CSS

.column {
  width: 500px;
}

.card {
  border: 1px solid;
  min-height: 100%;
  position: relative;
  background: #000;
  transition: all 300ms ease-out;
}
.card .description-wrap {
  padding: 100px 30px;
  position: relative;
  overflow: hidden;
}
.card .description {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  flex-wrap: wrap;
  transition: all 500ms ease-out;
  overflow-x: auto;

  transform: translateY(100%);
  opacity: 0;
}

p {
  padding: 20px;
}
.card .description > * {
  width: 100%;
}

.card .description h3 {
  margin: 0;
  font-size: 26px;
}
.card .description h4 {
  margin: 0;
}
.card .description ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.card .description ul li {
  display: inline-block;
  width: 40px;
  margin: 0 10px;
  transition: all 300ms ease-out;
  transform: perspective(1000px) rotateX(0deg);
}
.card .description ul li:hover {
  transform: perspective(1000px) rotateX(50deg);
  transform-style: preserve-3d;
}

.card .description ul li img {
  max-width: 100%;
}

.pro-pic {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  background-size: cover;
  background-position: center center;
  transition: all 500ms ease-out;
}

.card:hover .pro-pic {
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
.card:hover {
  border-radius: 10px;
}

.card:hover .description {
  transform: translateY(0%);
  opacity: 1;
}