代表者の戯言

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 */

}

VB