Zoomy image rollover

Developer
Mitch Pruitt
Size
2,764 Kb
Views
18,216
  1. Zoomy image rollover Previews
  2. Zoomy image rollover HTML Codes
  3. Zoomy image rollover CSS Codes
  4. Zoomy image rollover JS Codes

How do I make an zoomy image rollover?

What is a zoomy image rollover? How do you make a zoomy image rollover? This script and codes were developed by Mitch Pruitt on 08 November 2022, Tuesday.

Zoomy image rollover Previews
IQ Test

Zoomy image rollover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Zoomy image rollover</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .container { width: 20em; height: 20em; margin: 10em auto; overflow: hidden; text-align: center; border: 1px dotted #0f0f0f;
}
.container .image { margin: auto;
}
.container .image img { width: 24em; height: 24em; margin: -1em 0 0 -1em; -webkit-filter: saturate(0.7); -moz-filter: saturate(0.7); -o-filter: saturate(0.7); -ms-filter: saturate(0.7); -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
}
.container:hover img { width: 28em; height: 28em; margin: -5em auto auto -5em; -webkit-filter: saturate(1); -moz-filter: saturate(1); -o-filter: saturate(1); -ms-filter: saturate(1);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="image"> <img src="https://distilleryimage11.s3.amazonaws.com/19d0a6fa021011e39ba022000a1fb984_7.jpg" /> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/js/jquery.zlayer.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Zoomy image rollover - Script Codes CSS Codes

.container { width: 20em; height: 20em; margin: 10em auto; overflow: hidden; text-align: center; border: 1px dotted #0f0f0f;
}
.container .image { margin: auto;
}
.container .image img { width: 24em; height: 24em; margin: -1em 0 0 -1em; -webkit-filter: saturate(0.7); -moz-filter: saturate(0.7); -o-filter: saturate(0.7); -ms-filter: saturate(0.7); -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
}
.container:hover img { width: 28em; height: 28em; margin: -5em auto auto -5em; -webkit-filter: saturate(1); -moz-filter: saturate(1); -o-filter: saturate(1); -ms-filter: saturate(1);
}

Zoomy image rollover - Script Codes JS Codes

$('.container').zlayer([ { layer:'.image', mass: 8 }], { repositionTransition:'all .5s ease-in-out' }
);
Zoomy image rollover - Script Codes
Zoomy image rollover - Script Codes
Home Page Home
Developer Mitch Pruitt
Username mitchdot
Uploaded November 08, 2022
Rating 3
Size 2,764 Kb
Views 18,216
Do you need developer help for Zoomy image rollover?

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!

Mitch Pruitt (mitchdot) Script Codes
Name
ASCII triangle image overlay
Sooper cool article header image
Flexbox-based responsive menu
The Iron Triangle
Image header overlay
Off-screen navigation
Sample project gallery
Segmented control
Simple responsive drop-down menu
Contact Card Flip
Create amazing SEO content 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!