How to build a responsive author list using html and css

How to build a responsive author list using html and css

In this tutorial we will go over the process in coding a very basic CSS responsive author list. There’s no need for javascript in this tutorial. We will walk through the build in this order HTML > CSS > Media Queries. Using Fontawesome 5 cdn For Font Icon 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

HTML:

<div class="container">
<div class="user-card">
<div class="card">
<img src="https://bornrealist.com/wp-content/uploads/2017/10/MPU-Mann.jpg" alt="">
<div class="caption">
<h2 class="author">Author Name</h2>
<p>Web Designer</p>
<ul class="social">
<li><a href="/"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="/"><i class="fab fa-twitter"></i></a></li>
<li><a href="/"><i class="fab fa-youtube"></i></a></li>
<li><a href="/"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>

<div class="card">
<img src="https://bornrealist.com/wp-content/uploads/2017/10/MPU-Mann.jpg" alt="">
<div class="caption">
<h2 class="author">Author Name</h2>
<p>Web Designer</p>
<ul class="social">
<li><a href="/"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="/"><i class="fab fa-twitter"></i></a></li>
<li><a href="/"><i class="fab fa-youtube"></i></a></li>
<li><a href="/"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>

<div class="card">
<img src="https://bornrealist.com/wp-content/uploads/2017/10/MPU-Mann.jpg" alt="">
<div class="caption">
<h2 class="author">Author Name</h2>
<p>Web Designer</p>
<ul class="social">
<li><a href="/"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="/"><i class="fab fa-twitter"></i></a></li>
<li><a href="/"><i class="fab fa-youtube"></i></a></li>
<li><a href="/"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>

<div class="card">
<img src="https://bornrealist.com/wp-content/uploads/2017/10/MPU-Mann.jpg" alt="">
<div class="caption">
<h2 class="author">Author Name</h2>
<p>Web Designer</p>
<ul class="social">
<li><a href="/"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="/"><i class="fab fa-twitter"></i></a></li>
<li><a href="/"><i class="fab fa-youtube"></i></a></li>
<li><a href="/"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
</div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #f5f5f5;
  font-family: sans-serif;
}
.container{
  width: 80%;
  height: 100%;
  margin: 100px auto;
}
.user-card{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 5px;
}
.card, .card img{
  width: 100%;
  height: 100%;
  position: relative;
}
.card{
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
  padding: 5px;
  overflow: hidden;
}
.card .caption{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  transition: .2s;
}
.card:hover .caption{
  background-color: transparent;
}
.card .caption h2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 70%;
  color: #fff;
  border-top: 1px solid;
  border-bottom: 1px solid;
  transition: .2s;
}
.card:hover .caption h2{
  padding: 10px
}
.card .caption p{
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 70%;
  color: #fff;
}
.card .caption ul.social{
  position: absolute;
  bottom: -30px;
  right: 10px;
  transition: .2s;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 5px;
}
.card .caption ul.social li{
  list-style-type: none;
  display: inline-block;
}
.card .caption ul.social li a{
  display: block;
  color: #fff;
  text-align: center;
}
.card:hover .caption ul.social{
  bottom: 10px
}

Demo