Yashwardhan Pauranik Yashwardhan Pauranik - 3 months ago 9
CSS Question

daimond changing to square on hover why?

I made a grid of squares and rotate them with 45degrees to make it diamond, but when I hover it to scale it through CSS transform property, the diamond again changes to a square on hover. Please help me out in this thing. I don't want the diamond to change back to a square. And also you can see some part of the square is hiding within below row.

This is the image of what I made. On hover on any diamond, it changes to square.

Here's my CSS code

.square {
width: 150px;
height: 150px;
background-color: white;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .16);
transform: rotate(45deg);
transition: all 0.3s ease-in-out;
}


.square:hover {
transform: scale(1.5);
}

.panel {
background: transparent;
margin-top: 50px;
}

.r2 {
transform: translateX(148px) translateY(-70%);
}

.r3 {
transform: translateY(-148%);
}

.row {
margin-top: 50px;
}


Here's my html

<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
</div>
<div class="row r2">
<div class="panel">
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
</div>
</div>
<div class="row r3">
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
<div class="col-md-3">
<div class="square">
</div>
</div>
</div>
</div>




http://codepen.io/yash51/pen/VjoQLr

Answer

You just have to put the transform functions in the same declaration :

i.e. :

.square:hover {
    transform: scale(1.5) rotate(45deg);
}

Here is a working fiddle

Hope it helps.