Image View Slide on Hover Using CSS and JavaScript

Creating interactive image galleries is a great way to enhance user experience and add visual appeal to your website. In this tutorial, we’ll build a sleek image view slide on hover

📦 HTML Structure

<div class="image-slides">
  <div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
    <img src="https://code.bydev24.com/uploads/code-snippts/thumb1.jpg">
  </div>
  <div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
    <img src="https://code.bydev24.com/uploads/code-snippts/thumb2.jpg">
  </div>
  <div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
    <img src="https://code.bydev24.com/uploads/code-snippts/thumb3.jpg">
  </div>
  <div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
    <img src="https://code.bydev24.com/uploads/code-snippts/thumb4.jpg">
  </div>
  <div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
    <img src="https://code.bydev24.com/uploads/code-snippts/thumb5.jpg">
  </div>
  <div class="image-slide-block" onmouseover="fullImage(event, 1)" onmouseleave="fullImage(event, 0)">
    <img src="https://code.bydev24.com/uploads/code-snippts/thumb6.jpg">
  </div>
</div>

Each image is wrapped inside a .image-slide-block div. The onmouseover and onmouseleave events trigger the JavaScript function that handles the sliding animation.

🎨 CSS Styling

.image-slides {
  display: flex;
  max-width: 100%;
  width: 400px;
  height: 400px;
}
.image-slides .image-slide-block {
  width: 100%;
  transition-duration: 0.6s;
}
.image-slides .image-slide-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

The container uses display: flex to align the images horizontally. Each image block has a transition effect for smooth resizing. The object-fit: cover ensures the image fills its container without distortion.

⚙️ JavaScript Function

const fullImage = (event, action) => {
  var otherTarget = document.querySelectorAll(".image-slide-block");
  if(action == 1){
    for(var i = 0; i < otherTarget.length; i++){
      otherTarget[i].style.width = '20px';
    }
    event.target.style.width = '100%';
  } else {
    for(var i = 0; i < otherTarget.length; i++){
      otherTarget[i].style.width = '100%';
    }
  }
}

This function dynamically adjusts the width of each image block. On hover, all blocks shrink to 20px except the one being hovered, which expands to 100%. On mouse leave, all blocks reset to equal width.