Search code examples
cssimagehoverzooming

Zoom image over side divs

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 couldn't do was to make the img tag to be on top of the columns 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!

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

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