Hovering over the image causes it to flicker and it remains the same

Question

Hovering over the image causes it to flicker and it remains the same

I have an image column within a grid, where the images are displayed at 25px x 25px to fit nicely in each row.

I've added a hover effect to the images so that when you hover over them, they shift left (which is working) and then expand for better visibility.

However, I'm experiencing two issues:

1) The image flickers continuously when hovered over.

2) Despite moving 100px to the left, the image doesn't expand to the new size as intended.

I'm unsure why these issues are happening.

$(document).ready(function() {
  LoadCatalogsGrid();
});

var myData = [{
    "RoomName": "Room 1",
    "OptionImageFile": "a"
  },
  {
    "RoomName": "Room 2",
    "OptionImageFile": "b"
  }
];

function optionGridImage(url) {
  return "<div class='imageOptionsList'><a style='text-align:center;height:25px;width:25px;' href='" +
    GetCatalogImageLocation(url) +
    "'><img  src='" +
    GetCatalogImageLocation(url) +
    "' style='height:25px;width:25px;' alt=''/></a></div>";
}

function GetCatalogImageLocation(imageName) {
  if (imageName == "a") {
    return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
  } else {
    return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
  }
}

function LoadCatalogsGrid() {
  $("#Grid").empty();
  $("#Grid").kendoGrid({
    scrollable: true,
    selectable: "row",
    filterable: false,
    height: 700,
    columns: [{
        field: "RoomName",
        title: "Room Name",
        width: "120px",
        template: "<div >#=RoomName #</div>"
      },
      {
        field: "OptionImageFile",
        title: "Image",
        template: "#= optionGridImage(OptionImageFile) #",
        attributes: {
          style: "margin:0 auto;"
        },
        width: 50
      }
    ],
    dataSource: {
      data: myData
    },
    dataBound: function(e) {

    }
  });
}

.imageOptionsList:hover a {
  visibility: visible;
  width: 250px !important;
  height: 325px !important;
  margin-left: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>

<div id="Grid"></div>

** Snippet Edit ** The flickering issue has been resolved, however upon hovering, the image now moves to the left instead of staying in place and enlarging as expected.

css

Answer 1

Answer №1

Here is your requested code:

$(document).ready(function() {
  LoadCatalogsTable();
});

var tableData = [{
    "RoomName": "Room 1",
    "OptionImageFile": "a"
  },
  {
    "RoomName": "Room 2",
    "OptionImageFile": "b"
  }
];

function displayTableImage(url) {
  url = getImageLocation(url);
  return `
    <div class="imageOptions">
      <a style="background-image:url(${url})" href="${url}">
        <img src="${url}" alt="">
      </a>
    </div>
  `;
}

function getImageLocation(imageName) {
  if (imageName == "a") {
    return "https://images.example.com/imageA.jpg";
  } else {
    return "https://images.example.com/imageB.jpg";
  }
}

function LoadCatalogsTable() {
  $("#Table").empty();
  $("#Table").kendoGrid({
    scrollable: true,
    selectable: "row",
    filterable: false,
    height: 700,
    columns: [{
        field: "RoomName",
        title: "Room Name",
        width: "120px",
        template: "<div >#=RoomName #</div>"
      },
      {
        field: "OptionImageFile",
        title: "Image",
        template: "#= displayTableImage(OptionImageFile) #",
        attributes: {
          style: "margin:0 auto;"
        },
        width: 50
      }
    ],
    dataSource: {
      data: tableData
    },
    dataBound: function(e) {

    }
  });
}

.k-grid td {
  overflow: visible !important
}

.imageOptions a {
  position: relative;
  display: inline-block;
  height: 25px;
  width: 25px;
  background-size: cover;
}

.imageOptions a img {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 0;
  height: 0;
  transition: .5s
}

.imageOptions a:hover {
  z-index: 1
}

.imageOptions a:hover img {
  width: 50vw;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>

<div id="Table"></div>

Answer 2

Here is your requested code:

$(document).ready(function() {
  LoadCatalogsTable();
});

var tableData = [{
    "RoomName": "Room 1",
    "OptionImageFile": "a"
  },
  {
    "RoomName": "Room 2",
    "OptionImageFile": "b"
  }
];

function displayTableImage(url) {
  url = getImageLocation(url);
  return `
    <div class="imageOptions">
      <a style="background-image:url(${url})" href="${url}">
        <img src="${url}" alt="">
      </a>
    </div>
  `;
}

function getImageLocation(imageName) {
  if (imageName == "a") {
    return "https://images.example.com/imageA.jpg";
  } else {
    return "https://images.example.com/imageB.jpg";
  }
}

function LoadCatalogsTable() {
  $("#Table").empty();
  $("#Table").kendoGrid({
    scrollable: true,
    selectable: "row",
    filterable: false,
    height: 700,
    columns: [{
        field: "RoomName",
        title: "Room Name",
        width: "120px",
        template: "<div >#=RoomName #</div>"
      },
      {
        field: "OptionImageFile",
        title: "Image",
        template: "#= displayTableImage(OptionImageFile) #",
        attributes: {
          style: "margin:0 auto;"
        },
        width: 50
      }
    ],
    dataSource: {
      data: tableData
    },
    dataBound: function(e) {

    }
  });
}

.k-grid td {
  overflow: visible !important
}

.imageOptions a {
  position: relative;
  display: inline-block;
  height: 25px;
  width: 25px;
  background-size: cover;
}

.imageOptions a img {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 0;
  height: 0;
  transition: .5s
}

.imageOptions a:hover {
  z-index: 1
}

.imageOptions a:hover img {
  width: 50vw;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>

<div id="Table"></div>

Answer 3

Answer №2

To enhance your hover effect, consider removing the margin-left: 100px from your CSS class and instead utilize a transform property to increase image size. By using the following code snippet, you can double the size of the image when hovered over:

.imageOptionsList:hover img {
   visibility: visible;
   transform: scale(2);
}

Answer 4

To enhance your hover effect, consider removing the margin-left: 100px from your CSS class and instead utilize a transform property to increase image size. By using the following code snippet, you can double the size of the image when hovered over:

.imageOptionsList:hover img {
   visibility: visible;
   transform: scale(2);
}

Answer 5

Answer №3

There seems to be some conflicting information in your post regarding the left offset. It's mentioned as correct, but then it's suggested that it should be at the end.

In the revised version below, I have removed the inline styles from the image and updated the selector to target img tags within .imageOptionsList. Additionally, a transition has been added to ensure a smooth effect, which can be removed if desired.

$(document).ready(function() {
  LoadCatalogsGrid();
});

var myData = [{
    "RoomName": "Room 1",
    "OptionImageFile": "a"
  },
  {
    "RoomName": "Room 2",
    "OptionImageFile": "b"
  }
];

function optionGridImage(url) {
  return "<div class='imageOptionsList'><a style='text-align:center;height:25px;width:25px;' href='" +
    GetCatalogImageLocation(url) +
    "'><img  src='" +
    GetCatalogImageLocation(url) +
    "alt=''/></a></div>";
}

function GetCatalogImageLocation(imageName) {
  if (imageName == "a") {
    return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
  } else {
    return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
  }
}

function LoadCatalogsGrid() {
  $("#Grid").empty();
  $("#Grid").kendoGrid({
    scrollable: true,
    selectable: "row",
    filterable: false,
    height: 700,
    columns: [{
        field: "RoomName",
        title: "Room Name",
        width: "120px",
        template: "<div >#=RoomName #</div>"
      },
      {
        field: "OptionImageFile",
        title: "Image",
        template: "#= optionGridImage(OptionImageFile) #",
        attributes: {
          style: "margin:0 auto;"
        },
        width: 50
      }
    ],
    dataSource: {
      data: myData
    },
    dataBound: function(e) {

    }
  });
}

.imageOptionsList img {
  width: 25px;
  height: 25px;
  transition: height 500ms ease-in-out, width 500ms ease-in-out;
}
.imageOptionsList img:hover {
  width: 250px;
  height: 325px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>

<div id="Grid"></div>

Answer 6

There seems to be some conflicting information in your post regarding the left offset. It's mentioned as correct, but then it's suggested that it should be at the end.

In the revised version below, I have removed the inline styles from the image and updated the selector to target img tags within .imageOptionsList. Additionally, a transition has been added to ensure a smooth effect, which can be removed if desired.

$(document).ready(function() {
  LoadCatalogsGrid();
});

var myData = [{
    "RoomName": "Room 1",
    "OptionImageFile": "a"
  },
  {
    "RoomName": "Room 2",
    "OptionImageFile": "b"
  }
];

function optionGridImage(url) {
  return "<div class='imageOptionsList'><a style='text-align:center;height:25px;width:25px;' href='" +
    GetCatalogImageLocation(url) +
    "'><img  src='" +
    GetCatalogImageLocation(url) +
    "alt=''/></a></div>";
}

function GetCatalogImageLocation(imageName) {
  if (imageName == "a") {
    return "https://images.mentalfloss.com/sites/default/files/styles/mf_image_16x9/public/king_lead.jpg?itok=4b75-ttE&resize=1100x1100";
  } else {
    return "https://pmcvariety.files.wordpress.com/2017/08/king-of-the-hill.jpg?w=1000&h=562&crop=1";
  }
}

function LoadCatalogsGrid() {
  $("#Grid").empty();
  $("#Grid").kendoGrid({
    scrollable: true,
    selectable: "row",
    filterable: false,
    height: 700,
    columns: [{
        field: "RoomName",
        title: "Room Name",
        width: "120px",
        template: "<div >#=RoomName #</div>"
      },
      {
        field: "OptionImageFile",
        title: "Image",
        template: "#= optionGridImage(OptionImageFile) #",
        attributes: {
          style: "margin:0 auto;"
        },
        width: 50
      }
    ],
    dataSource: {
      data: myData
    },
    dataBound: function(e) {

    }
  });
}

.imageOptionsList img {
  width: 25px;
  height: 25px;
  transition: height 500ms ease-in-out, width 500ms ease-in-out;
}
.imageOptionsList img:hover {
  width: 250px;
  height: 325px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>

<div id="Grid"></div>

Hovering over the image causes it to flicker and it remains the same

Answer №1

Answer №2

Answer №3

Similar questions

Troublesome tab key function in FireFox causing navigation issues

The element selector for the <code> tag is not recognized in SCSS

Absolute positioning causes an element's height to increase

What is the process for utilizing Angular's emulated encapsulation attributes on HTML elements that are dynamically added to an Angular component?

The navigation bar appears to have a different width on mobile view specifically on one page

"How to change the hover background of a select element in Chrome from its default setting to something else

Attempting to replicate a <textarea> to behave like a <div> element

List of shapes and text items

CSS Selector for when a radio button is selected

The problem with the Bootstrap Navbar Dropdown is that it opens up within the confines of

Easily showcase a limitless number of items within a 10-column grid using Bootstrap!

The outline none property on the Material UI IconButton is malfunctioning

Enhancing bar border with the addition of a separator

Unable to eliminate italicized text within collapsible content

Switch up the Thumbnail Image based on the selected category

Is there a way to position the twitter embed at the center of a webpage?

A way to insert a line break in an HTML document without using the <br> tag is

I possess a primary menu with several submenus, yet I am encountering difficulty accessing the submenus. My goal is to efficiently navigate and access the appropriate submenu within the main menu

How can I arrange an ItemTemplate and Alternating ItemTemplate next to each other in a Gridview layout?

Dropdown menu will appear when you click on one of the menu items