Component
import Image from './image.jpg';
import {Zoom} from "./zoom";
function App() {
return (
<div className="App">
<Zoom
image={Image}
/>
</div>
);
}HTML
.zoom {
cursor: default;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("image.jpg");
}<body>
<div class="App">
<div class="container">
<figure class="zoom">
<img alt="zoom" src="image.jpg" class="image__preview"/>
</figure>
</div>
</div>
<script type="text/javascript" src="zoom/index.js"></script>
</body>npm i or yarn install
npm start or yarn start
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
Open vanilla-zoom/index.html to view it in your browser.
About
A Zoom functionality that follows the mouse direction via hover with examples in React and Vanilla JS.
@authors: Hector Rodrigues da Silva