Jexcel | Image

Rendering images on the jExcel spreadsheet - Jquery plugin.

by DefuZe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://bossanova.uk/components/jexcel/dist/js/jquery.jexcel.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/components/jexcel/dist/css/jquery.jexcel.css">
<div class='img'>
  <div class='image-colorize'>
  <img  src='https://mdn.mozillademos.org/files/12700/basic-image.png' />
  </div>
</div>

CSS

.image {
  width: 100%;
  overflow: hidden;
}

.image-colorize img {
  transition: transform .5s, filter 0.5s ease-in-out;
  filter: blur;
}

.image-colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.1);
}