CodePen Embed - Pure CSS Profile Card Hover effect

<body>
  <div class="blog">
        <div class="card">
          <div class="blog-entry">
            <div class="entry-cover">
              <a href="">
                <img src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80" alt="" />
              </a>
            </div>
            <div class="entry-hover">
              <div class="hover-cover real"></div>
              <div class="hover-info">
                 <img src="https://media.istockphoto.com/photos/businessman-working-on-laptop-in-cafe-picture-id1141484322?s=612x612" alt="" />
                 <p class="hover-author">Ahmed Ibrahim</p>
                 <h2><a href="">Responsive Work</a></h2>
                 <p class="desination">Nature Photography</p>
                 <p class="hover-text">  Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, debitis. Soluta, veniam non! Sed praesentium numquam et perspiciatis in id vel rem, eveniet cumque? Nostrum facere quia labore nam. Quos?
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="blog-entry">
            <div class="entry-cover">
              <a href="">
                <img src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80" alt="" />
              </a>
            </div>
            <div class="entry-hover">
              <div class="hover-cover real"></div>
              <div class="hover-info">
                 <img src="https://media.istockphoto.com/photos/businessman-working-on-laptop-in-cafe-picture-id1141484322?s=612x612" alt="" />
                 <p class="hover-author">Ahmed Ibrahim</p>
                 <h2><a href="">Responsive Work</a></h2>
                 <p class="desination">Nature Photography</p>
                 <p class="hover-text">  Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, debitis. Soluta, veniam non! Sed praesentium numquam et perspiciatis in id vel rem, eveniet cumque? Nostrum facere quia labore nam. Quos?
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="blog-entry">
            <div class="entry-cover">
              <a href="">
                <img src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80" alt="" />
              </a>
            </div>
            <div class="entry-hover">
              <div class="hover-cover real"></div>
              <div class="hover-info">
                 <img src="https://media.istockphoto.com/photos/businessman-working-on-laptop-in-cafe-picture-id1141484322?s=612x612" alt="" />
                 <p class="hover-author">Ahmed Ibrahim</p>
                 <h2><a href="">Responsive Work</a></h2>
                 <p class="desination">Nature Photography</p>
                 <p class="hover-text">  Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, debitis. Soluta, veniam non! Sed praesentium numquam et perspiciatis in id vel rem, eveniet cumque? Nostrum facere quia labore nam. Quos?
                </p>
              </div>
            </div>
          </div>
        </div>
  </div>
</body>

* {
  margin: 0;
  padding: 0;
  border-sizing: border-box;
}
body {
  font-size: 15px;
  font-family: momospace;
  background-color: #151315;
  background-size: cover;
  height: 100vh;
  color: white
}
.blog-entry .hover-info .hover-cover,
.blog-entry:hover .hover-info .hover-cover,
.blog-entry .hover-info, a {
  transition: ease-in-out .3s;
}
img {
  max-width: 100%;
}
.blog {
  padding: 80px 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}
h2, h3 {
  font-family: momospace;
}
.blog-entry {
  margin-bottom: 200px;
  position: relative
}
.blog-entry .entry-hover {
  position: absolute;
  inset: 0;
  margin: 20px
}
.blog-entry .hover-info {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: -25px;
  text-align: center;
  z-index: 4;
}
.blog-entry:hover .hover-info {
  top: 0;
  margin-top: 25px
}
.blog-entry .hover-info img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 18px
}
.blog-entry:hover .hover-info img {
  transition: all 0.5s ease-in-out;
}
.blog-entry:hover .hover-info:hover img {
  transform: scale(1.3) rotate(360deg);
}
.blog-entry .hover-info p {
  font-size: 13px;
  font-size: italic
}
.blog-entry .hover-info h2 a {
  color: #fff;
  text-decoration: none
}
.blog-entry .hover-info .desination{
  margin: 20px 0
}
.blog-entry .hover-info .hover-author,
.blog-entry .hover-info .hover-text {
  display: none;
  margin-bottom: 20px
}
.blog-entry:hover .hover-info .hover-author,
.blog-entry:hover .hover-info .hover-text {
  display: block
}
.blog-entry .entry-hover .hover-cover {
  position: absolute;
  inset: none 0 50%;
  z-index: 2;
  border-radius: 50%;
  transition: all .3s ease-in-out
}
.blog-entry:hover .entry-hover .hover-cover {
  inset: 0;
  border-radius: 0
}
.real {
  background-color: deepskyblue
}

This Pen is owned by Ahmed Ibrahim on CodePen.

See more by @AhmedXcode on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.