Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

All
Hello
Popular Sites
JavaScript Best Codes
Html Free Codes
Html5 Free Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter Page
Youtube Channel
Support
Contact Us
About Html Best Codes
Not a member? Sign Up

Sliding Panel with Background Image

Written by @kerixa 19 May 2020

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.

Code Snippet:

                                                
                                                <!-- this script is provided by 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='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300
TRENDING POST
1
Generic Survey Form
2
Shrinking and enlarge loader animation
3
Spinner Loader with Customizable Text
4
Fading Trailer Circle Spinner Loader
5
Eclipse Spinner Loader
VISITORS
Online Users: 12
Recent Members: Jenisha, Mr Joseph Charles, Nikhil 999+, bishalthakur
advertisement 2