IF HOVER,make the SVG bigger!
I want to introduce you the way to make the SVG bigger using CSS.
Please prepare rock.svg in advance.
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<p>実験部屋にようこそ！
<img src="rock.svg" id="circle1">
</div>
<script type="text/javascript">
</script>
</body>
</html>
CSS
#circle1 {
position: absolute; /* position verify */
top: 400px;
right:500px;
width: 80px; /*first size */
transition: transform 1s ease; /* smooth change */
}
#circle1:hover {
transform: scale(3); /* expansion three times */
}
