<a class="link-card" href="https://blog.mayuko.cn" target="_blank">
  <div class="link-card__content">
    <h1>Hades's Blog</h1>
    <p>Always believe that something wonderful is about to happen.</p>
  </div>
</a>
.link-card__content h1 {
  font-size: 19px;
  color: #000;
  margin:0 0 5px;
  -webkit-font-smoothing: antialiased;

}

.link-card__content p {
  font-size: 15px;
  color: #999;
  margin: 0;
  width: 100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  -webkit-font-smoothing: antialiased;
}

.link-card {
    position: absolute;
    top: 25 px;
    width: 96%;
    margin: 40px 2% 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.04);
    transition: all 0.2s ease;
    overflow: hidden;
    text-decoration: none;
}

.link-card__content {
  display: flex;
  flex-direction: column;
  padding: 25px 20px;
  transition-property: transform;
  transition: all 0.2s ease;
}

.link-card:hover {
  box-shadow: 0 25px 45px rgba(50,50,93,.1),0 12px 19px rgba(0,0,0,.06);
  transform: translateY(-3px);
  cursor: pointer;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.