HTML Coding

<html> <head> <title>Coding TutorialsDesign</title> <link type="text/css" rel="stylesheet" href="css/stylesheet.css"> </head> <body> <div class="background_Design"> <div class="container_D"> <div class="Box_D"> <div class="thumb"> <img src="img/gift.jpg"> </div> <div class="Detail_D"> <div class="content_D"> <i class="fa fa-gift" aria-hidden="true"></i> <h3>Gift</h3> <a href="">Read More</a> </div> </div> </div> <div class="Box_D"> <div class="thumb"> <img src="img/global.jpg"> </div> <div class="Detail_D"> <div class="content_D"> <i class="fa fa-globe" aria-hidden="true"></i> <h3>Globe</h3> <a href="">Read More</a> </div> </div> </div> <div class="Box_D"> <div class="thumb"> <img src="img/glass.jpg"> </div> <div class="Detail_D"> <div class="content_D"> <i class="fa fa-glass" aria-hidden="true"></i> <h3>Glass</h3> <a href="">Read More</a> </div> </div> </div> <div class="Box_D"> <div class="thumb"> <img src="img/student.jpg"> </div> <div class="Detail_D"> <div class="content_D"> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <h3>Student Cap</h3> <a href="">Read More</a> </div> </div> </div> </div> </div> </body> </html>

CSS Coding

.background_Design { margin:0; padding:0; background:#20024a; width:100%; height:100vh; } .container_D { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:1000px; height:500px; display: flex; } .container_D .Box_D { position: relative; width:250px; height:500px; background:#ccc; transition:0.5s; } .container_D .Box_D:hover { transform:scale(1.1); z-index:1; box-shadow:0 5px 20px rgba(0,0,0,1); } .container_D .Box_D .thumb { position: absolute; width:100%; height:250px; overflow: hidden; } .container_D .Box_D:nth-child(odd) .thumb { bottom:0; left:0; } .container_D .Box_D .thumb img { width:100%; height:250px; } .container_D .Box_D .Detail_D { position: absolute; width:100%; height:250px; overflow:hidden; background:#262626; } .container_D .Box_D:nth-child(even) .Detail_D { bottom:0; left:0; } .container_D .Box_D:nth-child(1) .Detail_D { background:#8553cb; } .container_D .Box_D:nth-child(2) .Detail_D { background:#fe8f01; } .container_D .Box_D:nth-child(3) .Detail_D { background:#79d400; } .container_D .Box_D:nth-child(4) .Detail_D { background:#ff3b34; } .container_D .Box_D .Detail_D .content_D { position: absolute; top:calc(50% + 16px); transform:translateY(-50%); width:100%; padding:20px; box-sizing: border-box; text-align: center; transition:0.5s; } .container_D .Box_D:hover .Detail_D .content_D { top:calc(50%); } .container_D .Box_D .Detail_D .content_D .fa { font-size:80px; color:#fff; } .container_D .Box_D .Detail_D .content_D h3 { margin:0; padding:0; padding:10px 0; color:#fff; } .container_D .Box_D .Detail_D .content_D a { display:inline-block; padding:10px 20px; color:#fff; border:2px solid #fff; text-decoration:none; transition:0.5s; border-radius:20px; transform: scale(0); } .container_D .Box_D:hover .Detail_D .content_D a { transform: scale(1); } .container_D .Box_D .Detail_D .content_D a:hover { background:#fff; color: #262626; } @media (max-width:1000px) { .container_D { width:100%; height:auto; padding:20px; box-sizing: border-box; } .container_D .Box_D { height:250px; } .container_D .Box_D .thumb { display: none; } } @media (max-width:768px) { .container_D { display: inline; } .container_D .Box_D { width:50%; height:250px; float:left; } } @media (max-width:480px) { .container_D { top:0; left:0; transform:translate(0); } .container_D .Box_D { width:100%; height:250px; float:none; } }