Html Code: Sliding Panel with Background Image

When various sections have to be included in a single page, one idea is to use panels. The following script shows you how to use panels with dynamic effects. When the mouse hovers each slide, it is zoomed and the related text appears. There exist a background image for each panel. However, you can turn it off by the top left Toggle button.
<!-- this script got from www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Skewed Flexbox Panels</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  font-family: "Georgia", serif;
  font-size: 16px;
  line-height: 1.4;
  background-color: black;
}

main {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  width: 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
@media (min-width: 30px) {
  main {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    width: 130%;
    margin-left: -15%;
  }
}
main section:not(:first-child):not(:last-child):hover {
  -webkit-box-flex: 2;
          flex: 2;
}
main section:not(:first-child):not(:last-child):hover:after {
  opacity: .8;
}
main section:not(:first-child):not(:last-child):hover article {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity .2s .2s, -webkit-transform .2s .2s;
  transition: opacity .2s .2s, -webkit-transform .2s .2s;
  transition: opacity .2s .2s, transform .2s .2s;
  transition: opacity .2s .2s, transform .2s .2s, -webkit-transform .2s .2s;
}
@media (min-width: 30px) {
  main section:not(:first-child):not(:last-child):hover article {
    -webkit-transform: translateY(0) skewX(-15deg);
            transform: translateY(0) skewX(-15deg);
  }
}

section {
  -webkit-box-flex: 1;
          flex: 1;
  position: relative;
  width: 100%;
  min-height: 20vh;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: flex-grow .2s, opacity .2s, -webkit-box-flex .2s;
  transition: flex-grow .2s, opacity .2s, -webkit-box-flex .2s;
  transition: flex-grow .2s, opacity .2s;
}
section:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  -webkit-transition: width .2s, -webkit-transform .2s;
  transition: width .2s, -webkit-transform .2s;
  transition: transform .2s, width .2s;
  transition: transform .2s, width .2s, -webkit-transform .2s;
}
section:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  -webkit-transition: opacity .2s;
  transition: opacity .2s;
}
@media (min-width: 30px) {
  section {
    width: 20%;
    height: 100vh;
    margin-right: -1px;
    -webkit-transform: skewX(15deg) translateZ(0);
            transform: skewX(15deg) translateZ(0);
  }
  section:before {
    left: -100%;
    width: 400%;
    -webkit-transform: skewX(-15deg);
            transform: skewX(-15deg);
  }
}
section:nth-child(1):before {
  background-color: #e60000;
  background-image: url(https://www.htmlbestcodes.com/uploads/other/3-1.jpg);
}
.hide-images section:nth-child(1):before {
  background-image: none;
}
section:first-child:before, section:last-child:before {
  background-color: #660000;
}
section:first-child:after, section:last-child:after {
  opacity: .5;
}
section:first-child article, section:last-child article {
  display: none;
}
section:nth-child(2):before {
  background-color: #cc0000;
  background-image: url(https://www.htmlbestcodes.com/uploads/other/3-2.jpg);
}
.hide-images section:nth-child(2):before {
  background-image: none;
}
section:first-child:before, section:last-child:before {
  background-color: #660000;
}
section:first-child:after, section:last-child:after {
  opacity: .5;
}
section:first-child article, section:last-child article {
  display: none;
}
section:nth-child(3):before {
  background-color: #b30000;
  background-image: url(https://www.htmlbestcodes.com/uploads/other/3-3.jpg);
}
.hide-images section:nth-child(3):before {
  background-image: none;
}
section:first-child:before, section:last-child:before {
  background-color: #660000;
}
section:first-child:after, section:last-child:after {
  opacity: .5;
}
section:first-child article, section:last-child article {
  display: none;
}
section:nth-child(4):before {
  background-color: #990000;
  background-image: url(https://www.htmlbestcodes.com/uploads/other/3-4.jpg);
}
.hide-images section:nth-child(4):before {
  background-image: none;
}
section:first-child:before, section:last-child:before {
  background-color: #660000;
}
section:first-child:after, section:last-child:after {
  opacity: .5;
}
section:first-child article, section:last-child article {
  display: none;
}
section:nth-child(5):before {
  background-color: maroon;
  background-image: url(https://www.htmlbestcodes.com/uploads/other/3-5.jpg);
}
.hide-images section:nth-child(5):before {
  background-image: none;
}
section:first-child:before, section:last-child:before {
  background-color: #660000;
}
section:first-child:after, section:last-child:after {
  opacity: .5;
}
section:first-child article, section:last-child article {
  display: none;
}

article {
  position: relative;
  padding: 24px;
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  z-index: 1;
  -webkit-transition: opacity .2s, -webkit-transform .2s;
  transition: opacity .2s, -webkit-transform .2s;
  transition: opacity .2s, transform .2s;
  transition: opacity .2s, transform .2s, -webkit-transform .2s;
}
@media (min-width: 30px) {
  article {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    opacity: 0;
    -webkit-transform: translateY(24px) skewX(-15deg);
            transform: translateY(24px) skewX(-15deg);
  }
}

h2 {
  font-size: 32px;
  margin-bottom: 12px;
}

button {
  position: fixed;
  top: 12px;
  left: 12px;
  padding: 8px 12px;
  font-size: 10px;
  text-transform: uppercase;
  color: white;
  background-color: black;
  border: none;
  outline: none;
  cursor: pointer;
}
</style>
<main>
<section>
<article>
<h2>Panel Title</h2>
<p>This is some description text for this panel.</p>
</article>
</section>
<section>
<article>
<h2>Panel Title</h2>
<p>This is some description text for this panel.</p>
</article>
</section>
<section>
<article>
<h2>Panel Title</h2>
<p>This is some description text for this panel.</p>
</article>
</section>
<section>
<article>
<h2>Panel Title</h2>
<p>This is some description text for this panel.</p>
</article>
</section>
<section>
<article>
<h2>Panel Title</h2>
<p>This is some description text for this panel.</p>
</article>
</section>
</main>
<button>Toggle images</button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script id="rendered-js">
/*
Panels with images are somewhat jerky when all panels are transitioning. Ideas on improvements are welcome in the comments!
*/
var btn = $('button');
var body = $("body");

btn.on("click", function () {
  body.toggleClass("hide-images");
});
</script><a target='_blank' href='http://www.htmlbestcodes.com/' style='font-size: 8pt; text-decoration: none'>HTML Codes</a>
If you don't know how to use this code or need more information Click here!
Html Best Codes

Html Code: Sliding Panel with Background Image

Review

Links
