Introduction of Slider with hover effect
We are again here with our new project, which is the slider with hover effect. This is made with the help of the simple and easy code of HTML, CSS, and JavaScript. In this project, there will be some images that overlap each other. There will also be two buttons below the images. When the user clicks on the button, the images will slide left when clicked on the left button. The images will slide right when clicked on the right button, with the help of JavaScript given with an arrow of direction. This is a very useful project, as you can use it to store your favorite images. Make it for your practice if you are a fresher.
Now let’s start making such an amazing and creative Carousel Hover Effect as the Image Slider without wasting our time. We will follow the simple and easy steps of HTML, CSS, and JavaScript one by one. I hope you will understand it fully. For any doubt, you can contact us by connecting with us through the link given in the footer of the website. I will try my best to provide you with a worthy and valuable Carousel HTML CSS Template for use anywhere.
HTML (Hypertext Markup Language)
First, we will make the structure of this Carousel Hover Effect with the help of following the code of HTML (Hyper Text Markup Language, this is a markup language that is used to make web pages by writing the code in a text editor). In this project, first we will give the title of the project in the “title tag (this is used to give the title of the project). Then we will move toward the main content.
In which we will make a parent div that will contain all the images. Some child divs in which we will insert the images in the “img tag. At the end, we will make a small div in the child div. In which there will be the name of the image in “h1 (which is used to implement the heading)”. Some lines about the image in the paragraph tag (which is used to write the paragraph).
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Carousel with hover effect</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="carousel"> <div class="carousel__item carousel__item--left"> <img src="https://i.pinimg.com/originals/ea/fd/16/eafd1603d0937a7fe51208013cc84eb2.jpg" alt="Tony Start"> <div class="carousel__text"> <h3>Tony Start</h3> <p> The Iron Man</p> </div> </div> <div class="carousel__item carousel__item--main"> <img src="https://wallpapersmug.com/download/800x600/867960/thor-artwork.jpg" alt="Thor Odin'son"> <div class="carousel__text"> <h3>Thor Odin'son</h3> <p>God of Thunder</p> </div> </div> <div class="carousel__item carousel__item--right"> <img src="https://wallpapers.com/images/hd/captain-america-android-0aqaztdwgpz41epy.jpg" alt="Steve Roges"> <div class="carousel__text"> <h3>Steve Roges</h3> <p>Captain America</p> </div> </div> <div class="carousel__item"> <img src="https://img.etimg.com/thumb/width-1200,height-1200,imgsize-38950,resizemode-75,msid-107732642/news/international/us/spider-man-4-check-out-latest-updates-on-release-date-cast-plot-production-and-more.jpg" alt="Peter Parker"> <div class="carousel__text"> <h3>Peter Parker</h3> <p>The Spider Man</p> </div> </div> <div class="carousel__item"> <img src="https://i.ebayimg.com/images/g/l60AAOSwheFaxb9Q/s-l1200.webp" alt="Natasha Romanoff"> <div class="carousel__text"> <h3>Natasha Romanoff</h3> <p>The Black Widow</p> </div> </div> <div class="carousel__item"> <img src="https://i.pinimg.com/736x/52/0c/73/520c73c9859124e0dfa092ce7b5023a6.jpg" alt="Wade Wilson"> <div class="carousel__text"> <h3>Wade Wilson</h3> <p>Deadpool</p> </div> </div> <div class="carousel__btns"> <button class="carousel__btn" id="leftBtn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="m15 4l2 2l-6 6l6 6l-2 2l-8-8z"/></svg></button> <button class="carousel__btn" id="rightBtn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="m9.005 4l8 8l-8 8L7 18l6.005-6L7 6z"/></svg></button> </div> </div> <!-- partial --> <script src="./script.js"></script> </body> </html>
CSS (Cascading Style Sheet)
After creating the structure of this Carousel Hover Effect with the help of HTML, we will now give it some styling. We will use CSS (Cascading Style Sheet is used to give styling to the HTML page elements that are attached to the HTML’s link tag, it is used to attach any link). In this, we will first make the background black using the background-color property. Take the whole gallery to the center of the screen.
We will adjust the size and position of the image’s parent div and use the z-index property to overlap one photo with another, and all the images will be in one row. We also have to design two buttons. One to slide left and another to slide right by giving it the background color property in the hovering effect.
*, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; font-family: 'Montserrat', sans-serif; } html { font-size: 62.5%; } body { box-sizing: border-box; font-size: 1.6rem; background-color: #000000; color: #fff; display: grid; place-items: center; min-height: 100vh; } .carousel { position: relative; } .carousel__item { position: relative; height: 35rem; width: 25rem; border-radius: 3px; overflow: hidden; box-shadow: 0 1rem 4rem rgba(0,0,0,.5); position: absolute; transform: translate(-50%,-50%) scale(.1); z-index: 0; transition: all .2s linear; } .carousel__item img { width: 100%; min-height: 100%; object-fit: cover; } .carousel__item:hover{ border-radius: 11px; } .carousel__item--main { transform: translate(-50%,-50%) scale(1); z-index: 2; cursor: pointer; } .carousel__item--left { transform: translate(-110%,-50%) scale(.9); z-index: 1; } .carousel__item--right { transform: translate(10%,-50%) scale(.9); z-index: 1; } .carousel__item--left img, .carousel__item--right img { filter: grayscale(80%); } .carousel__item--right:hover { transform: translate(10%,-50%) scale(1.2); z-index: 3; cursor: pointer; } .carousel__item--left:hover { transform: translate(-110%,-50%) scale(1.2); z-index: 3; cursor: pointer; } .carousel__item--main:hover { transform: translate(-50%,-50%) scale(1.2); } .carousel__item:hover > .carousel__text { opacity: 1; } .carousel__item:hover img { filter: grayscale(0%); } .carousel__text { position: absolute; bottom: 0; z-index: 4; opacity: 0; transition: opacity .2s; width: 100%; text-align: center; background-color: rgba(0,0,0,.5); padding: 2rem 1rem; color: #fff; } .carousel__btns { position: absolute; transform: translate(-50%, 22rem); display: flex; gap: 2rem; } .carousel__btn { background-color: transparent; height: 5rem; width: 5rem; border-radius: 50%; border:1px solid currentColor; color: #fff; cursor: pointer; } .carousel__btn:hover{ background:honeydew; color: black; transition: 0.5s ease; box-shadow: 5px 5px 15px white; } .carousel__btn svg { height: 1.8rem; width: 1.8rem; } .carousel__btn:hover { color: #aaa; }
JavaScript
We have made the whole design of this Carousel Hover Effect, but only one thing remains. The working of the button to slide the image. In this, we will use JavaScript to implement the main logic. In which we have to target the HTML elements and apply the JavaScript functions to them. We will make the different functions used to make our code easy to understand. We also have to apply the sliding logic by targeting the two buttons through their IDs.
'use strict'; const carouselItems = document.querySelectorAll('.carousel__item'); console.log(carouselItems) let currentItem = document.querySelector('.carousel__item--main'); const leftBtn = document.querySelector('#leftBtn'); const rightBtn = document.querySelector('#rightBtn'); rightBtn.addEventListener('click', function() { currentItem = document.querySelector('.carousel__item--right'); const leftItem = document.querySelector('.carousel__item--main'); carouselItems.forEach((item,i) => { item.classList = 'carousel__item'; }); currentItem.classList.add('carousel__item--main'); leftItem.classList.add('carousel__item--left'); const currentId = Array.from(carouselItems).indexOf(currentItem); const rightItem = currentId === carouselItems.length -1 ? carouselItems[0] : carouselItems[currentId +1]; rightItem.classList.add('carousel__item--right'); }); leftBtn.addEventListener('click', function() { currentItem = document.querySelector('.carousel__item--left'); const rightItem = document.querySelector('.carousel__item--main'); carouselItems.forEach((item,i) => { item.classList = 'carousel__item'; }); currentItem.classList.add('carousel__item--main'); rightItem.classList.add('carousel__item--right'); const currentId = Array.from(carouselItems).indexOf(currentItem); const leftItem = currentId === 0 ? carouselItems[carouselItems.length-1] : carouselItems[currentId-1]; leftItem.classList.add('carousel__item--left'); });
Output of Slider with hover effect
Finally, we have made a fully functional slider with hover effect with the help of HTML, CSS, and JavaScript. You can make such a project by taking ideas from here and trying them yourself to increase your knowledge. If you want the source code of Carousel HTML CSS Template , then click on the button given below.

For more explanation, click on the link given below to watch the video.
You can also check: