Why is a diamond changing to a square on hover?

Question

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. 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.

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

please give us a jsfiddle, it would be way easier to help you. — ZombieChowder, Aug 28 '16 at 12:42

score 2 · Accepted Answer · answered Aug 28 '16 at 12:53

2

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.

answered Aug 28 '16 at 12:53

JazZ

4,469
2
20
40

1

Thank You so much bro :) – Yashwardhan Pauranik Aug 28 '16 at 12:58

score 2 · Answer 2 · edited May 23 '17 at 11:54

You can trying to change

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

to

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

Because property of transform not matching. You must include your first property to :hover.

I try this solution in http://codepen.io/anon/pen/akZqOm

and this solution come from https://stackoverflow.com/a/10765771/3808304

PS. I'm not good in English. I hope you will understand me : )

Why is a diamond changing to a square on hover?

2 Answers2