How to create zoom in in CSS
<![CDATA[
<!--DOCTYPE html-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.image-wrap {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.image-wrap img {
top: -50px;
left: -150px;
height: 400px;
width: 400px;
transition: all 500ms ease-in;
position: absolute;
}
.image-wrap img:hover {
top: 0;
left: 0;
height: 200px;
width: 200px;
}
</style>
<div class="image-wrap">
<img alt="" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vAqtlAsPYmNTrA4XVRJzZBNF2-wy6ZoOLgQMWJJiVjNyVc0gBC_r2NpFISo92xkWL7oFJdQcLosuYXwsO4R7EnyzBwB_B8UmT-V54qD9FSz_uwCp-PIlcg7okNKFo8AETeHUJSLMC7fD75gNxcpJ9jevYi_WUzo2Vym8fgXBdTJEeAHGjJCPVY=s0-d">
</div>
</body>
</html>
]]>
agyanadda
Author & Editor
Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.
0 $type={blogger}:
Post a Comment