ホバー時画像切り替え（ゆったり変化/オリジナル）

■hover時の画像切り替え/ゆったり変化（オリジナル）■

●ＨＴＭＬ

<li class=”photo2″><a href=”01_gyo-ten.html”><img src=”image/main2.png” width=”272″ height=”272″ alt=””/></a></li>

●ＣＳＳ

main #main2 .photo2 a{main #main2 .photo2 a{ background:url(../image/main2.png) no-repeat; width:272px; height:272px; margin:0px 0 0 500px; transition: all ease-in-out 0.3s; }

main #main2 .photo2 a{ display:inline-block; }

main #main2 .photo2 img{ border: none; opacity: 0; }

main #main2 .photo2 a:hover{{ background:url(../image/main2_hover.png) no-repeat; }

main #main2 .photo2 a:hover img{ }

●ポイント
・ visibility: hidden;をimgタグにつけるがこれは違う。
・ＨＴＭＬとaとa:hoverに画像を入れ、transitionはa{}に入れる。
・参考は牧場サイトトップページの野菜。