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

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

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 №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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In React, when utilizing the grid system, is there a way to easily align items to the center within a 5 by

I need to center align items within the material-UI grid, with the alignment depending on the number of items. For instance, if there are 5 items, 3 items should be aligned side by side in the center and the remaining 2 items should also be centered. Pleas ...

javascriptcssreactjsmaterial-ui

Simultaneous activation of CSS classes by multiple RouterLinkActive components

Using multiple <a> tags with routerLink presents a unique behavior. Upon loading the home page, the home icon in aMenuItems is correctly given the active class through routerLinkActive, while the remaining elements in the array do not have this class ...

htmlcssrouter

Chrome is experiencing a rendering problem as a result of using @Font-Face

Having trouble with rendering in my Angular 4 application, similar to the issue outlined in this post about Angular 2 Chrome DOM rendering problems. Despite there being a solution provided in that post, I am still facing difficulties when navigating betwee ...

cssangularlessangular2-templateangular2-components

Using both text and image sprites in a horizontal menu list on a UL element

I am attempting to create a horizontal menu using image sprites and text, but have been unsuccessful so far. Although I have an idea of what I want it to look like, my CSS is not achieving the desired result. This is what my current CSS looks like: < ...

htmlcssmenu

The problem of SVG rendering order requires a solution that does not rely on javascript

I am new to experimenting with inline svg, and I wanted to share my code: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="350"> <defs> <style> .ring { transform-origin: 175px 175px; } ...

csssvg

Refresh the CSS inheritance and hover effects

Facing an issue with my web project where I am using CSS. At times, I need to reset the inheritance from the parent class for certain elements. Although I have defined some classes to style my elements, I want to completely reset all styles except for hove ...

htmlcsshover

Troubleshooting Safari compatibility with CSS transitions: a first attempt

Greetings everyone, I am a complete beginner here so please bear with me. After looking at some examples, I have managed to create a start/stop slowdown feature. Here is the JSFiddle link for reference .small-wheel, .big-wheel{ transition: all 2s ease ...

jquerycsssafaritransition

Tips for emphasizing the letters of the alphabet used in search functionality with Angular

Is there a way to highlight specific alphabets in the searched list instead of highlighting the entire word? Currently, when filtering the memberOffice and memberFacilities lists based on the alphabet entered in the search field, the entire text is highlig ...

javascripthtmlcssangular

Incorporate Margins for Table Cells in Outlook (HTML Email)

I'm currently in the process of creating an email newsletter and testing it out on Litmus. Here's how the newsletter design should appear (refer to the image below): Although I understand that it may not look exactly the same on Outlook, is the ...

htmlcssemailoutlook

Steps for implementing an <h1> element with the React Material UI theme

I have chosen the 'dark' theme and would like to apply it to an h1 element. How can I achieve this? The method below does not yield the desired result: <MuiThemeProvider theme={theme}> <h1>Page Title</h1> ... The following ...

htmlcssreactjsmaterial-ui

Issue with React when attempting to add a secondary class to Toggle component

Is there a way to add a second class to my <div> with the class "button"? When I try to append 'toggle-button', the class doesn't seem to work. <CSSTransitionGroup transitionName="buttonAninmated" transitionEnterTimeout={30 ...

htmlcssclassreactjssass

Responsive div not displaying background image

Here is a straightforward and easy-to-understand code snippet: HTML markup: <div class="jumbotron text-center top-jumbotron"> </div> CSS: .top-jumbotron { background: #ffcc00; background-image: url('../../bootstrap/img/home-pag ...

htmlcssresponsive-designbackground-image

In PHP, you can customize the colors to emphasize different data sets

In my MySQL database connected through PHP, I have data displayed in table format. My goal is to highlight certain data based on age with two conditions: Condition 1: - Color red (#FF7676) for ages greater than 24 Condition 2: - Color yellow (#F8FF00) fo ...

javascriptphphtmlmysqlcss

Creating background color animations with Jquery hover

<div class="post_each"> <h1 class="post_title">Single Room Apartments</h1> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb last" ...

javascriptjqueryhtmlcss

Overlap of images on a responsive CSS page

I'm venturing into the world of responsive design for the first time, but I seem to be facing some challenges. In the initial screenshot, you can see that the tower image is overlapping a div and I can't figure out where I went wrong. Check out t ...

htmlcssresponsive-designcss-float

Stopping a velocity.js animation once it has completed: is it possible?

For the pulsating effect I'm creating using velocity.js as a fallback for IE9, refer to box2 for CSS animation. If the mouse leaves the box before the animation is complete (wait until pulse expands and then move out), the pulsating element remains vi ...

javascriptjquerycssanimationvelocity.js

Expanding CSS Grid to Occupy Remaining Area

I'm currently utilizing CSS grid to construct a basic 3 column layout. Here's a snippet of my code... .container { display:grid; grid-template-columns:1fr 1fr 1fr; } ...

htmlcsscss-grid

What is the reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...

javascriptjqueryhtmlcss

How to use CSS to dynamically adjust the maximum width of an overflow container based on its children's content

I have a container with an overflowing <div> that displays multiple <ul> <li> lists. Each list always contains the same number of bordered <li> items, resembling a table. However, there may be instances where a <ul> has only ...

csshtmlwidthoverflow

Interactive SVG viewport dimension

Check out my "hamburger button" made in SVG, shown below. body { margin: 0; text-align: center; } svg#ham-btn { margin: 2rem; border: 1px solid black; fill: #383838; } <svg id="ham-btn" width="107.5px" height="80px" viewBox="0 0 80 80" pre ...

htmlcsssvg