Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre +(deprecated) Image Magnifying Glass | Deprecated
Test UI Features

book
+(deprecated) Image Magnifying Glass

html

index.html

copy
<style>
.union {
position: relative;
width: 100%;
margin: 20px auto;
max-width: 550px;
}

.glass {
position: absolute;
border-radius: 50%;
cursor: none;

width: 135px;
height: 135px;
}

.magnifier {
width: 50px !important;
cursor: grab;
position: absolute;

top: -40px;
right: -25px;
}
</style>

<body>
<div class="union">
<div class="magnifier">
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/glass.png"
onclick="magnify('picture', 2);"
/>
</div>
<img
id="picture"
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/picture.png"
/>
</div>
<script src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/image-tools-section/image-magnifying-glass.js"></script>
</body>

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 9. Chapitre 17
some-alt