画像をゆっくり表示させたい

Question

先ほど、クリッカブルマップで画像を表示させる方法をお聞きしたzendamanと言います。

【html】
<div class="container">
          <img src="img/room.jpg" usemap="#ImageMap" alt="" />
          <map name="ImageMap">

          <area shape="rect" coords="137,323,240,543" href="ichiran.xlsx" alt="" />
          <img class="pic" src="img/1-1.jpg" alt="">

          <area shape="circle" coords="718,480,54" href="ichiran.xlsx" alt="" />
          <img src="img/1-2.jpg" alt="">

          <area shape="rect" coords="1254,320,1343,639" href="ichiran.xlsx" alt="" />
          <img src="img/1-3.jpg" alt="">
          </map>
        </div>
【css】
map img{
  display:none;
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

}
area:hover+img{
  display: block;
  opacity: 0.5;
}
コード

回答をいただき、画像は出るようになったのですが、最後に画像をゆっくり出したい時に
CSSのarea:hover+imgにopacityを付けて半透明になるところまでできたのですが、
その後に半透明のまま完全に画像が表示されません。
通常"a img"に付けるようなのですが、このコードにはありません。
1つ目の画像にclass="pic"という名前を付けてそれに
transition: opacity 0.3s ease-out;
を付けてみましたがだめでした。
HTMLとCSSのみでよろしくお願いします。

Answer 1

transitionを使う場合には、display:noneは使えないです。
visibilityを使用してください。

map img{
  /*display:none;*/
  visibility:hidden;
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transition: all 0.3s ease-out;/* 変更 */
}


area:hover+img{
  /*display: block;*/
  visibility: visible;
  opacity: 0.5;
}

Comments

[zendaman999]

ありがとうございます！
これはわかりませんでした。自分の理想になりました。
また何かありましたらよろしくお願いします。