A Pen by Daria

Thumbnail
This awesome code was written by DM_Daria, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DM_Daria ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Daria</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="container-nav">
  <div class="section first"><div class="box"></div>
  </div>
  <div class="section">
  <div class="box"></div>
  </div>
  <div class="section"><div class="box"></div>
  </div>
  <div class="section"><div class="box"></div>

  </div>
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/DM_Daria/a-pen-by-daria-yVJNrG */
.container-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}
.section {
    position: relative;
    height: 100%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    flex: 1;
}

/* Interactive */
.section:hover {
    flex: 1.8;
    transition: flex 0.5s;
}

/* Fon */
.section {
 background-repeat: no-repeat; 
 background-size: cover;
 background-position: center;
  transform: skewX(-20deg);
}
.section:nth-child(1) {
 background-image: url(http://cdn.paper4pc.com/images/nature-bokeh-wallpaper-3.jpg);

}
.box {
    transform: skewX(20deg);
}
.section:nth-child(2) {
 background-image: url(http://ntt.cc/ext/Windows-7-wallpapers/Windows-7-ZA-wp6.jpg);
}
.section:nth-child(3) {
 background-image: url(http://www.osmais.com/wallpapers/201207/campos-verdes-wallpaper-1900x1200.jpg);
}
.section:nth-child(4) {
 background-image: url(https://nevseoboi.com.ua/uploads/posts/2010-10/1287597336_u423_5658_mountain-lake.jpg);
}


/* Filter */
.container-nav:hover > .section {
 filter: brightness(22%);
}
.container-nav:hover > .section:hover {
 filter: brightness(100%);
}
.section {
  transition: all 0.4s;
}
.box {
  overflow:hidden;
  
}

Comments