åå Show Folder Content on Hover





  1. Tutorials
  2. CSS
  3. Show Folder Content on Hover

Show Folder Content on Hover

In this tutorial, you will learn how to show folder icon content on hover with CSS. Watch the video below for a detailed tutorial.

HTML

<body>
    <div class="folder">
        <div class="file">
            <h3>1</h3>
        </div>
        <div class="file">
            <h3>2</h3>
        </div>
        <div class="file">
            <h3>3</h3>
        </div>
    </div>
</body>

CSS

body {
  margin: 0;
  background-color: #2e3537;
  font-family: 'Arial', sans-serif;
}

.folder {
  background: #016a8b;
  width: 130px;
  height: 90px;
  position: absolute;
  top: 40%;
  left: 45%;
  border-radius: 5px;
  cursor: pointer;
}

.folder:before {
  content: '';
  position: absolute;
  background-color: #0380a7;
  width: 130px;
  height: 90px;
  top: 10px;
  left: 0;
  border-radius: 5px;
  z-index: 99;
  box-shadow: 0px -2px 10px rgba(0,0,0,0.5);
  transition: all 0.5s;
}

.folder:after {
  content: '';
  position: absolute;
  width: 60px;
  height: 20px;
  top: -8px;
  left: 0;
  background: #016a8b;
  border-radius: 5px;
}

.file {
  position: absolute;
  width: 60px;
  height: 70px;
  top: 0;
  border-radius: 5px;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
  text-align: center;
  color: white;
  font-size: 17px;
  transition: all 1s;
}

.folder .file:nth-child(1) {
  background-color: #e41515;
  z-index: 3;
  left: 15px;
}

.folder .file:nth-child(2) {
  background-color: #83C3A6;
  z-index: 2;
  left: 35px;
}

.folder .file:nth-child(3) {
  background-color: #F4BA44;
  z-index: 1;
  left: 50px;
}

.folder:hover:before {
  transform: rotateX(20deg);
}

.folder:hover .file:nth-child(1) {
  transform: translate(-100%, -130%);
}

.folder:hover .file:nth-child(2) {
  transform: translate(0%, -130%);
}

.folder:hover .file:nth-child(3) {
  transform: translate(100%, -130%);
}