practice

　　　　

<html>

<style>
.ボディ{position:fixed;
top:40px;
left:40px;
width:200px;
height:1200px;}
.スライド_1{position:fixed;
top:68px;
left:190px;}
.スライド_1:hover{left:187px;
transition:0.1s;}
.スライド_2{position:fixed;
top:180px;
left:187px;}
.スライド_2:hover{left:218px;
transition:0.5s;}
.スライド_3{position:fixed;
top:284px;
left:187px;}
.スライド_3:hover{left:250px;
transition:0.6s;}
.スライド_4{position:fixed;
top:396px;
left:187px;}
.スライド_4:hover{left:278px;
transition:0.7s;}
.スライド_5{position:fixed;
top:520px;
left:187px;}
.スライド_5:hover{left:308px;
transition:0.8s;}
.スライド_6{position:fixed;
top:636px;
left:187px;}
.スライド_6:hover{left:340px;
transition:0.9s;}
.スライド_7{position:fixed;
top:756px;
left:187px;}
.スライド_7:hover{left:370px;
transition:1s;}
</style>

<div class="ボディ"><img src="trombone_body.png"height="64.8%"></div>
<div class="スライド_1"><img src="trombone_slide1.png"width="240px""></div>
<div class="スライド_2"><img src="trombone_slide1.png"width="240px""></div>
<div class="スライド_3"><img src="trombone_slide1.png"width="240px""></div>
<div class="スライド_4"><img src="trombone_slide1.png"width="240px""></div>
<div class="スライド_5"><img src="trombone_slide1.png"width="240px""></div>
<div class="スライド_6"><img src="trombone_slide1.png"width="240px""></div>
<div class="スライド_7"><img src="trombone_slide1.png"width="240px"></div>

</html>