Here is an example of some CSS code I am working with:
.some_class{
width: 30%;
height: 120px;
margin-left: 10%;
margin-right: 10%;
margin-top: 100px;
float: left;
@include boxShadowLevel(2);
transition: box-shadow 0.4s, transform 0.4s;
transform: scale(0);
&:nth-child(odd):hover{
transform: translate(-3px, -3px) scale(1.1);
@include boxShadowLevel(3);
}
&:nth-child(even):hover{
transform: translate(3px, -3px) scale(1.1);
@include boxShadowLevel(3);
}
// Additional CSS code here (not relevant for the question)
}
In this code snippet, you can see that the default transform style is set to scale(0), and it gets faded in using some JavaScript code during the page load.
$(elem[i]).css("transform", "scale(1)")
The issue I'm encountering is that the hover effect does not seem to work, possibly due to the initial transform setting.
Is there a way to resolve this problem without needing to add another wrapper div or any other workaround?