Overriding CSS datatable

Webix JS
,
#1

image
image1737×804 76.9 KB

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 {

  position:absolute;

  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;

}

if(!obj.skuimage){

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

  }else{

    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.
#3

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!

#4

Hello @NatashaS , thanks for your response.

this my code in snippet:
https://snippet.webix.com/v7t6bph8

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?

#5

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