Hover zoom on a background image

Developer
Anya Craig
Size
1,957 Kb
Views
50,600
  1. Hover zoom on a background image Previews
  2. Hover zoom on a background image HTML Codes
  3. Hover zoom on a background image CSS Codes
  4. Hover zoom on a background image JS Codes

How do I make an hover zoom on a background image?

What is a hover zoom on a background image? How do you make a hover zoom on a background image? This script and codes were developed by Anya Craig on 26 August 2022, Friday.

Hover zoom on a background image Previews
IQ Test

Hover zoom on a background image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover zoom on a background image</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="ducklings" data-scale="2.5"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hover zoom on a background image - Script Codes CSS Codes

.container { border: 2px solid black; height: 400px; width: 800px; margin: 0 auto; overflow: hidden;
}
.ducklings { width: 100%; height: 100%; background-size: cover; background-image: url("http://wallpapercave.com/wp/BcYmeHM.jpg"); cursor: crosshair; transition: .3s transform ease-in-out;
}

Hover zoom on a background image - Script Codes JS Codes

$(".ducklings") .on("mouseover", function(){ $(this).css({"transform": "scale(" + $(this).attr("data-scale") + ")" });
}) .on("mouseout", function(){ $(this).css({"transform": "scale(1)", 'transform-origin': '50% 50% 0' });
}) .on("mousemove", function(e){ $(this).css({"transform-origin": ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + "% "+ ((e.pageY - $(this).offset().top) / $(this).height()) * 100 + '%' });
})
Hover zoom on a background image - Script Codes
Hover zoom on a background image - Script Codes
Home Page Home
Developer Anya Craig
Username AnyaCraig
Uploaded August 26, 2022
Rating 3
Size 1,957 Kb
Views 50,600
Do you need developer help for Hover zoom on a background image?

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!

Anya Craig (AnyaCraig) Script Codes
Name
Simple Responsive Gallery
Bee flight animation using Snap.svg
Signpost rotation animation
Cupid in Pursuit
Text with Background Gradients and Text-Shadows
Drawing Tablet
Pawprints animation
Responsive Square with Background Image
Rainbow Pride Slide
Maple Blossom
Create amazing marketing copy 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!