Overriding CSS datatable

Can anyone help me? How do I override the datatable CSS, when I want to zoom the image, so that the image is above the datatable?

.img-hover-zoom {

  background: #222f3e;

  overflow: hidden;

  border-radius: .5em;

  border: 3px solid rgba(255, 255, 255, .05);


.img-hover-zoom--point-zoom {

  transform-origin: 65% 75%;

  transition: transform 1s, filter .5s ease-out;


/* The Transformation */

.img-hover-zoom--point-zoom:hover {


  transform: scale(3.5);

  z-index: 1000 !important;

  top: 50;


* {

    -webkit-transition: all 0.5s ease-in-out;

    -moz-transition: all 0.5s ease-in-out;

    -ms-transition: all 0.5s ease-in-out;

    -o-transition: all 0.5s ease-in-out;

    transition: all 0.5s ease-in-out;



    obj.image = "<img src='"+baseurl+"assets/images/users/noimages.jpg' width='50' height='50' class='img-hover-zoom img-hover-zoom--point-zoom'>";


    obj.image = "<img src='"+baseurl+"uploads/image/"+obj.skuimage+"' width='50' height='50' class='img-hover-zoom img-hover-zoom--point-zoom'>";


this is my script.

Hello @Captluff1,

Could you please shape a snippet of your code in our snippet tool, so we could build a solution for your request? Thank you in advance!

Hello @NatashaS , thanks for your response.

this my code in snippet:

So I want to zoom in on the image, but when I zoom in the image doesn’t look perfect because its position is below the datatable, can the image be above the datatable when zoomed in?

Hello, @Captluff1 .
Try it Code Snippet. Maybe this is what you need.