<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    
    <div class="he">
      <header>
          <h1> Attack on Titan</h1>
        </header>
</div> <!--  he  -->
  

      <section id="outline">


          <div class="member">

            <div class="img1"></div>

              <div class="name">
                <p> Annie Leonhart </p>
              </div>

                <div class="content">
                  <h1> Attack on Ani</h1>
                  <p>
Attack on Titan (Japanese: 進撃の巨人 Hepburn: Shingeki no Kyojin, lit. "Attack of Giants") is a Japanese manga series both written and illustrated by Hajime Isayama. The series first began in Kodansha's Bessatsu Shōnen Magazine on September 9, 2009, and it has been collected into 28 tankōbon volumes as of April 2019. It is set in a world where humanity lives in cities surrounded by enormous walls that protect the humans from gigantic man-eating humanoids referred to as titans.
                  </p>
                </div>
          </div>



          <div class="member">
            
            <div class="img2"></div>

              <div class="name">
                <p> Eren Yeager </p>
              </div>

                <div class="content">
                  <h1> Attack on Aren</h1>
                  <p>
Attack on Titan (Japanese: 進撃の巨人 Hepburn: Shingeki no Kyojin, lit. "Attack of Giants") is a Japanese manga series both written and illustrated by Hajime Isayama. The series first began in Kodansha's Bessatsu Shōnen Magazine on September 9, 2009, and it has been collected into 28 tankōbon volumes as of April 2019. It is set in a world where humanity lives in cities surrounded by enormous walls that protect the humans from gigantic man-eating humanoids referred to as titans.
                  </p>
                </div>
          </div>




                    <div class="member">
            
            <div class="img3"></div>

              <div class="name">
                <p>Armin Arlert</p>
              </div>

                <div class="content">
                  <h1> Attack on Armin</h1>
                  <p>
Attack on Titan (Japanese: 進撃の巨人 Hepburn: Shingeki no Kyojin, lit. "Attack of Giants") is a Japanese manga series both written and illustrated by Hajime Isayama. The series first began in Kodansha's Bessatsu Shōnen Magazine on September 9, 2009, and it has been collected into 28 tankōbon volumes as of April 2019. It is set in a world where humanity lives in cities surrounded by enormous walls that protect the humans from gigantic man-eating humanoids referred to as titans.
                  </p>
                </div>
          </div>




                    <div class="member">
            
            <div class="img4"></div>

              <div class="name">
                <p> Mikasa Ackerman</p>
              </div>

                <div class="content">
                  <h1> Attack on Mikasa</h1>
                  <p>
Attack on Titan (Japanese: 進撃の巨人 Hepburn: Shingeki no Kyojin, lit. "Attack of Giants") is a Japanese manga series both written and illustrated by Hajime Isayama. The series first began in Kodansha's Bessatsu Shōnen Magazine on September 9, 2009, and it has been collected into 28 tankōbon volumes as of April 2019. It is set in a world where humanity lives in cities surrounded by enormous walls that protect the humans from gigantic man-eating humanoids referred to as titans.
                  </p>
                </div>
          </div>
      </section>
  </body>
</html>
*{
padding: 0;
margin: 0;
}


header{
position: absolute;
top:0;
right: 0;
width: 40%;
text-align: center;
background-image: url("https://ddnavi.com/wp-content/uploads/2018/08/singeki_3ki.jpg");
background-size: cover;
background-position: center center;
height: 100%;
font-family: tahoma;
}



body{
  
background: rgba(232, 46, 31,0.9);
}

#outline{
  display: flex;
  height: 100vh;
  width: 90%; 
  position: relative;
}


.img1, .img2 ,.img3, .img4{
  position: absolute;
  background-position: center center;
  background-size: cover;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 2s ease 1s;
  filter: grayscale(50%);

}


.img1{
  background-image: url("https://file.namu.moe/file/e9817f5eaa2693f300a516c1bfcaf1a75d9e685b662d0651f4572b67b70f53d2");
}

.img2{
  background-image: url("https://file.namu.moe/file/498c365ae30225d497b9187ec3081c2d05fe85d8d2fda526501ed074e0623001");
}

.img3{
  background-image: url("http://i.imgur.com/fI2xVqb.jpg");
}

.img4{
  background-image: url("http://i.imgur.com/FqPHItk.jpg");
}


.member:hover .img1{
  filter: grayscale(0);
  background-image: url("https://hayabusa.io/abema/programs/30-3_s0_p25/thumb002.w800.v1513743254.jpg");
}

.member:hover .img2{
  filter: grayscale(0);
  background-image: url("https://t1.daumcdn.net/cfile/tistory/225D6E3653746FAB34");
}
.member:hover .img3{
  filter: grayscale(0);
    background-image: url("https://occ-0-990-987.1.nflxso.net/art/bbeb5/2b855f6a821e5adb9eaa41d0dc5964e1cf5bbeb5.jpg");
      background-position: 0 center;
}

.member:hover .img4{
  filter: grayscale(0);
  background-image: url("https://t1.daumcdn.net/cfile/tistory/22305C38537869CB1F");
}


.member{
  position: relative;
  width: 16.7%;
  overflow: hidden;
  transition:  all 1s;
}


 .member::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0 ;
  left: 0;
}

.member::after{
  background: rgba(232, 46, 31,0.7);
  opacity: 1;
  transition: all 1s;
}

.member:hover::after{
  background: linear-gradient(to Top, rgba(0,0,0,1) 10% , transparent 75%);
}

.member:hover{
  width: 60% !important;
}


.content p{
  transform: translateY(20px);
  position: absolute;
  z-index: 1;
  text-align: center;
  margin: 0 1.2em;
  bottom:15%;
  opacity: 0;
  color: #FFF;
}

.member:hover p{
  opacity: 1;
  transform: translateY(0);
  transition: all 1s ease 1s; 
}


.member .content h1{
  font-family: tahoma;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: bold;
  transition: all 1s;
}


.name{
  font-size: 2rem;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50% , -50%);
  z-index: 1;
  color: #FFF;
  transition: all 1s ease 1s; 

  font-family: tahoma;
}

.member:hover .name{
  opacity: 0; 
  margin-top: 20px;
  top:10%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.