Hover Effect not working

I placed a hover effect that when the cursor is on the two square boxes, the image will then zoom in.
However it appears it is only doing this on the second div box, the first box is not working.

The two boxes are named “main project” and “second project”
Can someone help me on this as I’ve been trying to figure it out but I cannot see where I’ve gone wrong.

Thank you

@miochung7, looking at your HTML, the only difference in the code between “main project” and “second project” is that main contains the following lines;

<div class="item_cursor">
<h6>Project 1</h6>
<p>Front-End</p>
</div>

If those lines are commented out or removed you get the transform effect you expect. Not sure what you’re trying to do but maybe this will help you achieve your goal.

Thank you! That worked!

However for some reason whenever I hover I’ve added transform: scale(1.5) on the first image ‘main project’ and it doesn’t seem to scale the image… is it because the text for ‘Project 1’ is in the way?