<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1><center>Touch Me!</center></h1> <div class="main"> <div class="s1"> </div> <div class="s2 img-responsive"></div> <div class="s3"></div> </div>

.main{ width:100%; height:100%; position: absolute; top:0px; left:0px; } .s1{ width:100%; height:0%; position: absolute; top:0%; } .s2{ width:100%; height:0%; position: absolute; top:33.3%; } .s3{ width:100%; height:0%; position: absolute; top:66.67%; } .main:hover .s1{ height:33.3%; border: 1px solid black; background: orange; transition: 2s; } .main:hover .s2{ height:33.3%; background: #ffff; border: 1px solid black; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Ashoka_Chakra.svg/145px-Ashoka_Chakra.svg.png"); background-repeat: no-repeat; background-position: center; transition: 2s; } .main:hover .s3{ height:33.3%; border: 1px solid black; background: green; transition: 2s; }