My transform: translate(10px 10px) isn't functioning as expected. When I only provide a value for the x-axis, it works fine. Using translateX and translateY separately works as well, but using both at the same time doesn't work. This means I can only translate the images on one axis but not on both simultaneously. Any suggestions?
.gallery {
text-align: center;
}
.gallery img {
position: relative;
width: 30%;
height: calculate(width*66%);
margin: 10px;
animation-name: blendin;
animation-duration: 3s;
transition: ease-in-out all 300ms;
}
.gallery img:hover {
box-shadow: 10px 10px 10px black;
transform: translate(10px 10px);
}<div class="gallery">
<img src="elbe.jpg" alt="Elbe">
<img src="tisch.jpg" alt="Tisch">
<img src="spiegelung.jpg" alt="Spiegelung">
</div>