*{
margin: auto;
}
.big{
width:600px;
height:600px ;
background-color: bisque;
position: relative;
}
.da{
width:200px;
height:300px;
background-color: cornflowerblue;
float: left;
position: absolute;
}
.da:hover{
transform: scale(1.4);
z-index: 999;
}
.db{
width:400px;
height: 600px;
background-color: khaki;
float:left;
margin-left: 200px;
position: absolute;
}
.db:hover{
transform: scale(1.4);
z-index: 999;
}
.dc{
width:200px;
height: 300px;
background-color: darkseagreen;
float: left;
margin-top:300px;
position: absolute;
}
.dc:hover{
transform: scale(1.4);
z-index: 999;
margin: auto;
}
.big{
width:600px;
height:600px ;
background-color: bisque;
position: relative;
}
.da{
width:200px;
height:300px;
background-color: cornflowerblue;
float: left;
position: absolute;
}
.da:hover{
transform: scale(1.4);
z-index: 999;
}
.db{
width:400px;
height: 600px;
background-color: khaki;
float:left;
margin-left: 200px;
position: absolute;
}
.db:hover{
transform: scale(1.4);
z-index: 999;
}
.dc{
width:200px;
height: 300px;
background-color: darkseagreen;
float: left;
margin-top:300px;
position: absolute;
}
.dc:hover{
transform: scale(1.4);
z-index: 999;
}
========================================
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
</head>
<body>
<div class="big">
<div class="da"></div>
<div class="db"></div>
<div class="dc"></div>
</div>
</body>
</html>