실전퍼블리싱(flex layout 이미지 어코디언 네이게이션)

flex layout 이미지 어코디언 네이게이션

예제보기

HTML

  <ul class="gallery">
    <li>
      <div class="content">
        <h2>Uploads made easy</h2>
        <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.</p>
        <div class="sns">
          <a href="javascript:viod(0)"><i class="fa fa-facebook-square"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-instagram"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-linkedin-square"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-google-plus-square"></i></a>
        </div>
      </div>
    </li>
    <li>
      <div class="content">
        <h2>Make release day count</h2>
        <p>Let the world know about your music. With Spotify for Artists, you can submit to playdivsts and update your profile to reflect your new sound.</p>
        <div class="sns">
          <a href="javascript:viod(0)"><i class="fa fa-facebook-square"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-instagram"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-linkedin-square"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-google-plus-square"></i></a>
        </div>
      </div>
    </li>
    <li>
      <div class="content">
        <h2>Get your royalties, fast</h2>
        <p>Recording royalties? Pubdivshing royalties? Matt and Kim, Sheryl Crow, and Cienfue weigh in on the importance of royalties</p>
        <div class="sns">
          <a href="javascript:viod(0)"><i class="fa fa-facebook-square"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-instagram"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-linkedin-square"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-google-plus-square"></i></a>
        </div>
      </div>
    </li>
    <li>
      <div class="content">
        <h2>Make Spotify yours</h2>
        <p>180 mildivon fans are waiting for you. Sign up to Spotify for Artists and make the most of your music.</p>
        <div class="sns">
          <a href="javascript:viod(0)"><i class="fa fa-facebook-square"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-instagram"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-linkedin-square"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-google-plus-square"></i></a>
        </div>
      </div>
    </li>
    <li>
      <div class="content">
        <h2>The Best Advice</h2>
        <p>Rapper and savvy business mogdiv Rick Ross gets straight to the point when it comes to the best advice he's ever received.</p>
        <div class="sns">
          <a href="javascript:viod(0)"><i class="fa fa-facebook-square"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-instagram"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-linkedin-square"></i></a>
          <a href="javascript:viod(0)"><i class="fa fa-google-plus-square"></i></a>
        </div>
      </div>
    </li>
  </ul>

CSS

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body {
  font-family: 'Raleway', sans-serif;
  line-height: 1.5em;
  margin: 0;
}
a {
  text-decoration: none;
}

.gallery {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 100vh;
}
.gallery li {
  border-right: 5px solid #000;
  flex: 1;
  transition: 0.5s;
  background: no-repeat center center;
  position: relative;
  overflow: hidden;
}
.gallery li:last-child {
  border-right: none;
}
.gallery li:nth-child(1) {
  background-image: url(../images/artistic-image-01.jpg);
}
.gallery li:nth-child(2) {
  background-image: url(../images/artistic-image-02.jpg);
}
.gallery li:nth-child(3) {
  background-image: url(../images/artistic-image-03.jpg);
}
.gallery li:nth-child(4) {
  background-image: url(../images/artistic-image-04.jpg);
}
.gallery li:nth-child(5) {
  background-image: url(../images/artistic-image-05.jpg);
}

.gallery:hover li {
  flex: 1;

}
.gallery li:hover {
  flex: 3;
  filter: grayscale(1);
}
.content {
  position: absolute;
  background-color: #000;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 250px;
  bottom: -320px;
  transition: 0.5s;
  padding: 20px;
  padding-top: 50px;
  box-sizing: border-box;
}
.content::before {
  content: '';
  position: absolute;
  background-color: #000;
  width: 100%;
  height: 80px;
  left: 0;
  top: -10px;
  transform-origin: left bottom;
  transform: rotate(-2deg) scale(1.3);

}
.sns a {
  color: #333;
}
.gallery li:hover .content {
  bottom: 0;
  transition-delay: 0.5s;
}