CSS -webkit transform does not happen on hover
My code is here: http://jsfiddle.net/HarleyV/yr8cf8m0/ It's about a specific section:
#circle_menu1:hover, #circle_menu2:hover,#circle_menu3:hover,#circle_menu4:hover{
-webkit-transform:scale(1.5);
-webkit-box-shadow: 0 0 20px black;
}
For some reason the shadow is drawn, but no variety of transformations will work. Any suggestions would be greatly appreciated as this is my first CSS / HTML project.
source to share
Transform doesn't work very well with animation. This basically leaves you with two options: use scaling instead of transform, or apply transform: scale to another element that doesn't have any animation properties. Scale is not supported by transitions, so if you want to smoothly scale red elements, I would recommend the second option.
Luckily you already have divs with their own id (#first, #second, ...) inside the circle_menu div_, so you can use those: http://jsfiddle.net/stby04/bsr3am0y/
#first, #second,#third,#fourth {
z-index: 4;
text-align: center;
position:absolute;
margin-top: 10px;
margin-bottom:10px;
line-height: 100%;
width: 100px;
height: 100%;
background: red;
color: white;
font-size: 80px;
border-radius: 50px;
transition: transform 0.4s;
}
#circle_menu1:hover, #circle_menu2:hover,#circle_menu3:hover,#circle_menu4:hover{
-webkit-transform:scale(1.5);
-webkit-box-shadow: 0 0 20px black;
}
I think you can clean up my CSS a bit, but it should demonstrate how it can work.
And as mentioned, also include the -moz prefix and unprefixed properties to make it work in all modern browsers (I really think only Safari still needs some -webkit prefixes). And border-radius definitely works without the prefix in all current browsers.
source to share