In this tutorial, you will learn how to show folder icon content on hover with CSS. Watch the video below for a detailed tutorial.
<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>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%);
}