Hover on image scale hidden behind other div tag-CodePudding

I managed to make the hover on image but the image seems like hidden behind the cards. How can I make it visible infront of the cards?

here the screenshot

and this is my css

  .zoom {
    transition: transform .2s;
  }
  .zoom:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(4); 
  }

What can I add in my css to make it visible infront of the cards?

CodePudding user response：

Give z-index higher than right section cards to your pc section

CodePudding user response：

You can use z-index to move the image in front of the cards;

.zoom:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(4);
  z-index: 999;
}