So, I'm creating this landing page: https://oakfield.online/

To give more focus on the image, I've tried to create a zoom effect on mouse hover. The objective is 50% achieved, the only thing that I could't do was to make the img tag to be on top of the collumns beside that image.

This is the result:

result

There is my css hover code for the img:

.box-imagem img:hover {
    z-index: 999999;
    transform:scale(1.1);
    -ms-transform:scale(1.1); /* IE 9 */
    -moz-transform:scale(1.1); /* Firefox */
    -webkit-transform:scale(1.1); /* Safari and Chrome */
    -o-transform:scale(1.1); /* Opera */
}

Any ideas about what should work?

Thanks!

    
z-index won't work with position: static (default position). Use position: relative or position: absolute – Morpheus 2 hours ago
    
@Morpheus, I've tried that to – Ronaldo Scotti 2 hours ago
    
My bad, I've not seen that you are using display: flex, so the first comment is not valid. – Morpheus 2 hours ago

2 Answers 2

.tcb-flex-col.tve_empty_dropzone:hover {
    z-index: 9999999;
}

Play with that - your containers are fighting for powerrrrr. :)

1  
Hey, thanks! Worked perfectly :) – Ronaldo Scotti 1 hour ago
    
No problem, looks great :) – Kurtis Rogers 1 hour ago

You can do like this in two ways

1)

.tcb-flex-col>.tve_empty_dropzone:hover {
        z-index: 9999999;
    }

2)

.tcb-flex-col.tve_empty_dropzone:hover {
        z-index: 9999999;
    }
    
Worked to, thanks! :) – Ronaldo Scotti 1 hour ago
    
You are welcome :) – Rasitha Ariyarathna 42 mins ago