I want to design a menu that resembles those "apps panels" we often see.
My menu consists of 6 elements, arranged side-by-side with no space between them. When I hover over an element, it slightly pops as shown in the code snippet below:
#account-bubble .account-param {
margin: 0;
padding: 0;
position: absolute;
display: inline-block;
width: 60px;
height: 60px;
border: 1px solid #CCC;
background: #F7F7F7;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
z-index: 0;
}
#account-bubble .account-param:hover, #account-bubble .account-param:focus, #account-bubble .account-param:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
z-index: 5000;
}
.p1 {
top: 15px;
left: 15px;
}
.p2 {
top: 15px;
left: 74px;
}
.p3 {
top: 15px;
left: 133px;
}
.p4 {
top: 74px;
left: 15px;
}
.p5 {
top: 74px;
left: 74px;
}
.p6 {
top: 74px;
left: 133px;
}
#account-bubble .profile-picture img {
}
#account-bubble .account-param {
}<div id="account-bubble">
<div class="account-param p1">
</div>
<div class="account-param p2">
</div>
<div class="account-param p3">
</div>
<div class="account-param p4">
</div>
<div class="account-param p5">
</div>
<div class="account-param p6">
</div>
</div>To achieve this, I had to set the position of my elements to absolute and then adjust their positions by 1px to prevent a 2px border overlap. However, upon hovering over an element, the z-index resets immediately upon cursor exit, resulting in a jarring "unhover" animation.
Looking for suggestions on how to improve this effect or any alternative methods using CSS. Thank you for your assistance.