practice

　　　　

<html>

<style>
.ズーム{display:block;
width:80px;
height:80px;
border:solid 1px black;
border-radius:50%;
display:inline-block;
text-align:center;
font-size:12px;
margin-top:100px;
margin-left:300px;
padding:10px;
transition-duration:0.2s;}
.ズーム:hover{transform:scale(7,7);}
.サンプル{padding:16px;
background-color:silver;
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-rows:auto;
gap:16px;}
.サンプル>main{overflow:auto;
padding:16px;
background-color:white;}
main>p{margin:4px;
font-size:16px;}
main>img{margin:4px;}
#A img{zoom:10%;}
#B img{zoom:20%;}
#C img{zoom:30%;}
#D img{zoom:40%;}
#E img{zoom:50%;}
#F img{zoom:100%;}
</style>

<div class="サンプル">
<main id="A">
<p>10% 表示</p>
<img src="guitar.png">
</main>
<main id="B">
<p>20% 表示</p>
<img src="guitar.png">
</main>
<main id="C">
<p>30% 表示</p>
<img src="guitar.png">
</main>
<main id="D">
<p>40% 表示</p>
<img src="guitar.png">
</main>
<main id="E">
<p>50% 表示</p>
<img src="guitar.png">
</main>
<main id="F">
<p>100% 等倍</p>
<img src="guitar.png">
</main>
</div>
<div class="ズーム"><img src="guitar.png"width="43%"><br>このレンズの倍率は?</div>

</html>