Html - How to combine scale style and hover event?

Viewed
August 19, 2023
286 views
0 votes
2 Answers

There is a container with images and scrollbar. My task is to scale image when hover event occurs. The snippet below demonstrates that.

The problem is cropping image on hover. If I remove the overflow style, the crop is gone, but the container also lost the scrollbar.

How can I display a scaled image when hovering over the image without cropping and at the same time save scrollbar for the container?

img {
  width: 28px
}

button:hover img {
  cursor: pointer;
  background-color: #3c3f43;
  border-radius: 4px;
  transform: scale(4.0)
}

<div id="container">
  <div style="width: 300px; height: 50px;"></div>
  <div style="overflow: auto; width: 200px; height: 50px">
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
  </div>
</div>

Answers

To display scaled images when hovering over the cursor without cropping and maintain the scrollbar for the container, you can make the following adjustments to your CSS:

Remove the overflow: auto style from the container’s inner div.
Add display: flex and flex-wrap: wrap to the container’s inner div to
allow the buttons to wrap to the next row when there isn’t enough
horizontal space.
Adjust the width of the container’s inner div to include space for
the scrollbar using the calc function

img {
  width: 28px;
}

#container > div:last-child {
  display: flex;
  flex-wrap: wrap;
  width: calc(200px - 15px); /* Adjust width to account for scrollbar */
}

button:hover img {
  cursor: pointer;
  background-color: #3c3f43;
  border-radius: 4px;
  transform: scale(4.0);
}

<div id="container">
  <div style="width: 300px; height: 50px;"></div>
  <div style="overflow: auto; width: 200px; height: 50px">
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
  </div>
</div>

Clone the image and set it position: fixed;. In the example below I use jquery:

$(document).on('mouseenter', 'button', function(){
  const t = $(this);
  const cloneImg = t.find('img').clone();
  cloneImg.addClass('clone-img');
  cloneImg.css({
    left: t.offset().left,
    top: t.offset().top,
  })
  t.append(cloneImg);
})

$(document).on('mouseleave', 'button', function(){
  $(this).find('.clone-img').remove();
})

img {
  width: 28px;
  cursor: pointer;
  border-radius: 4px;
}

.clone-img {
  position: fixed;
  pointer-events: none;
}

button:hover .clone-img{
  transform: scale(4);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div style="width: 300px; height: 50px;"></div>
  <div style="overflow: auto; width: 200px; height: 50px">
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
    <button><img src="https://cdn.betterttv.net/emote/6468f883aee1f7f4756770b5/3x"></button>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to combine scale style and hover event?

Answers