Image Loop on Hover

Developer
Thomas Vaeth
Size
6,080 Kb
Views
10,120
  1. Image Loop on Hover Previews
  2. Image Loop on Hover HTML Codes
  3. Image Loop on Hover CSS Codes
  4. Image Loop on Hover JS Codes

How do I make an image loop on hover?

Showcase several photos for team members (or whatever) on mouse enter where it pauses on that photo when the mouse leaves. Time each photo is seen can easily be adjusted in the settings object.. What is a image loop on hover? How do you make a image loop on hover? This script and codes were developed by Thomas Vaeth on 04 January 2023, Wednesday.

Image Loop on Hover Previews
IQ Test

Image Loop on Hover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image Loop on Hover</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Karla:400,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Team -->
<section class="team"> <div class="grid-xlarge"> <div class="team__container"> <article> <a class="team__link" href="https://www.linkedin.com/in/thomasvaeth/" target="_blank"> <div class="team__img-container"> <span class="preloader"></span> <figure class="team__img"> <img class="absolute-bg" src="https://source.unsplash.com/OKrac02GXgQ/1600x1600" alt=""/> <img class="absolute-bg" src="https://source.unsplash.com/Z8XMAHDpjyU/1600x1600" alt=""/> <img class="absolute-bg" src="https://source.unsplash.com/_FoHMYYlatI/1600x1600" alt=""/> <img class="absolute-bg" src="https://source.unsplash.com/Shuj-9LqHwk/1600x1600" alt=""/> <img class="absolute-bg" src="https://source.unsplash.com/sseiVD2XsOk/1600x1600" alt=""/> <img class="absolute-bg" src="https://source.unsplash.com/5D72aIYhwh8/1600x1600" alt=""/> <img class="absolute-bg" src="https://source.unsplash.com/2Ts5HnA67k8/1600x1600" alt=""/> <img class="absolute-bg" src="https://source.unsplash.com/Ku-pKAfBPFU/1600x1600" alt=""/> </figure> </div> <div class="team__text"> <h3 class="team__title">Thomas Vaeth</h3> <span class="team__position">Web Developer</span> </div> </a> </article> </div> </div>
</section> <script src="js/index.js"></script>
</body>
</html>

Image Loop on Hover - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100vh; font-family: "Karla", sans-serif; font-size: 100%; background-color: #f8f8f8;
}
@media (min-width: 32em) { body { font-size: 102.5%; }
}
@media (min-width: 54em) { body { font-size: 105%; }
}
@media (min-width: 65em) { body { font-size: 107.5%; }
}
@media (min-width: 75em) { body { font-size: 110%; }
}
@media (min-width: 91em) { body { font-size: 115%; }
}
@media (min-width: 115em) { body { font-size: 120%; }
}
@media (min-width: 130em) { body { font-size: 125%; }
}
h3 { margin-top: 0; margin-bottom: 0.25em; font-size: 1.25em; line-height: 1.1;
}
@media (min-width: 91em) { h3 { font-size: 1.5em; }
}
a { text-decoration: none;
}
img, figure { max-width: 100%; height: auto;
}
figure { margin: 0;
}
.grid-xlarge { margin-right: auto; margin-left: auto;
}
@media (min-width: 54em) { .grid-xlarge { width: 95%; }
}
@media (min-width: 91em) { .grid-xlarge { width: 80%; }
}
.absolute-bg { position: absolute; top: 0; left: 0; z-index: 0; height: 100%; width: 100%; background-position: 50%; background-repeat: no-repeat; background-size: cover; overflow: hidden;
}
.preloader { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 3em; width: 3em; margin: auto; border: 2px solid transparent; border-top-color: #47bec7; border-radius: 50%; opacity: 1; -webkit-animation: spin 1s linear infinite both; animation: spin 1s linear infinite both; -webkit-transition: opacity 2s 0.2s ease-out; transition: opacity 2s 0.2s ease-out;
}
@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }
}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.team { width: 100%; padding-right: 1em; padding-left: 1em;
}
.team__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-flow: wrap; flex-flow: wrap; margin-left: -1em; margin-right: -1em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.team__container > * { padding: 1em; -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%;
}
@media (min-width: 32em) { .team__container > * { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; }
}
@media (min-width: 54em) { .team__container > * { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; }
}
@media (min-width: 65em) { .team__container > * { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333%; }
}
.team__link { position: relative; display: block; height: 100%; width: 100%; border: 1px solid transparent; background-clip: padding-box; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 1s ease; transition: all 1s ease;
}
.team__link:hover { border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 47px rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(0, -0.5em, 0); transform: translate3d(0, -0.5em, 0);
}
.team__link:hover:after { opacity: 1;
}
.team__link:hover .team__title:after { left: 0; width: 100%;
}
.team__link:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-clip: padding-box; box-shadow: 0 2px 50px rgba(0, 0, 0, 0.2); opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
}
.team__header { margin-bottom: 2em; color: #47bec7; text-align: center;
}
.team__img-container { position: relative; background-color: #061c30;
}
.team__img { position: relative; padding-bottom: 100%; -webkit-animation: fade-in ease-in-out 1s both; animation: fade-in ease-in-out 1s both;
}
.team__text { padding: 1em 0.5em; color: #000; background-color: #fff; text-align: center;
}
@media (min-width: 32em) { .team__text { padding-top: 2em; padding-bottom: 2em; }
}
.team__title { position: relative; display: inline-block; /* * Add hover to pseudo element * left: 0; * width: 100% */ margin-bottom: 0.35em;
}
.team__title:after { content: ""; position: absolute; left: 50%; bottom: -0.1em; height: 2px; width: 0; background-color: #47bec7; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.team__position { display: block; font-size: 0.9em;
}

Image Loop on Hover - Script Codes JS Codes

'use strict';
var ImageLoop = function () { var s = undefined; return { settings: function settings() { return { image: document.querySelectorAll('.team__img'), link: document.querySelectorAll('.team__link'), intervalTime: 250 }; }, init: function init() { s = this.settings(); this.bindEvents(); }, bindEvents: function bindEvents() { this.hideImg(); this.hoverImg(); }, hideImg: function hideImg() { [].forEach.call(s.image, function (img) { [].forEach.call(img.children, function (moreImg, idx) { if (idx !== 0) { moreImg.style.display = 'none'; } }); }); }, hoverImg: function hoverImg() { [].forEach.call(s.link, function (link) { var interval = undefined; var count = 0; link.addEventListener('mouseenter', function (e) { var target = e.target.children[0]; // Idx 1 because of the span tag/preloader var img = target.children[1].children; var length = img.length; interval = setInterval(function () { img[count].style.display = 'none'; if (count === length - 1) { count = 0; } else { count++; } img[count].style.display = 'block'; }, s.intervalTime); }); link.addEventListener('mouseleave', function () { clearInterval(interval); }); }); } };
}();
ImageLoop.init();
Image Loop on Hover - Script Codes
Image Loop on Hover - Script Codes
Home Page Home
Developer Thomas Vaeth
Username thomasvaeth
Uploaded January 04, 2023
Rating 4.5
Size 6,080 Kb
Views 10,120
Do you need developer help for Image Loop on Hover?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thomas Vaeth (thomasvaeth) Script Codes
Name
Muggsy
SVG Mouse Animation
Random Quote Machine
Button Border Slide Mixin
Pokemon React
Wikipedia Viewer
Pomodoro Clock
Button Draw on Hover Mixin
Wired Link Mixin
Local Weather
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!