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%); }