という具合に処理を記述していきます。 それでは、一つずつ見ていきましょう。 画像をマウスオーバーで「移動」するCSS「translate」 「translate」は要素を移動できます。translate(X軸,Y軸)という書き方になります。 translateX(値),translateY(値)とすると、X軸、Y軸それぞれのみの記述ができます。 <div class="photo1"><img src="dummy_tn.png" alt=""></div> .photo1 img{ transition: 0.3s; } .photo1 img:hover{ -webkit-transform: translate(5px,5px); -moz-transform: translate(5px,5px); -ms-transform: translate(5px,5px); -o-tra
![CSSで画像をマウスオーバーしたときに効果を与える小技① | ホームページ制作 東京 【SKYGOLD】 / フリーランス WEBデザインオフィス](https://cdn-ak-scissors.b.st-hatena.com/image/square/2936cecd345c28ee10e64e1e65ed19556302ee4c/height=288;version=1;width=512/http%3A%2F%2Fskygold.jp%2Fwp%2Fwp-content%2Fuploads%2F2015%2F11%2FFotolia_57512482_Subscription_Monthly_M.jpg)