リンクにマウスをのせたとき，ポップアップでサムネイルを表示させる。
| 左の文字にマウスをのせると，サムネイル画像がポップアップする。
一見よさそうだが，マウスをのせていないとき，画像は見えないが，opacity 0で文字の右側に「表示されている」ので，右クリックに反応したり，画像の下のリンクがクリックできなかったりする。だからといって，display:none;で非表示にしておき，hover時にdisplay:block;にすると，アニメーションで表示されない。 |
<style>
.popup_container {
position:relative;
}
.popup {
position: absolute;
top: -50px;
left: 100px;
opacity: 0;
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
transiton-property: opacity, top;
transition-duration: 0.5s;
}
.popup_trigger:hover + .popup {
opacity: 1;
top: -80px;
}
</style>
<div class="popup_container">
<a class="popup_trigger" href="./index.php?key=jobqknn6w-45#_45">
学校だより４月号
</a>
<div class="popup">
<img src="./?action=common_download_main&upload_id=156" style="border:2px solid rgb(204, 204, 204);" />
</div>
</div>
display:noneで非表示にしておき，マウスホバー時にdisplay:blockにすると，display:blockのときにDOMが生成されるようで，opacityやtopがアニメーション後の設定になってしまい，結果としてアニメーションで表示されない。transitionプロパティではなく，animationプロパティを使えば，アニメーションで表示されるが，animationプロパティは戻るときに一瞬で戻ってしまい，今ひとつかっこ悪い。
そこで，height:0pxとoverflow:hiddenで非表示にしておき，マウスホバー時にheightを画像の高さに設定すると，思った通りの動作をするが，heightをautoにするとアニメーションされないので，数値で設定する必要がある。heightが変わるところをアニメーションで表示したくないので，heightのtransition-delayにマイナス値を設定して，heightの変化がアニメーションで表示されないようにする。
| 他にも，少しかっこよくするため，戻るときのtransition-durationを1sにしてみた。 |
<style>
.popup_container2 {
position:relative;
}
.popup2 {
max-height:0vh;
overflow:hidden;
position: absolute;
top: -50px;
left: 100px;
opacity: 0;
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
transition-property: max-height,opacity,top;
transition-duration: 1s;
transition-delay: 1s,0s,0s;
}
.popup_trigger2:hover + .popup2 {
transition-duration: 0.5s;
transition-delay: -0.5s,0s,0s;
max-height: 100vh;
opacity: 1;
top: -80px;
}
</style>
<div class="popup_container2">
<a class="popup_trigger2" href="./index.php?key=jobqknn6w-45#_45">
学校だより４月号
</a>
<img class="popup2" src="./?action=common_download_main&upload_id=156" style="border:2px solid rgb(204, 204, 204);" />
</div>
上のコードは，heightを数値で指定するので，複数のサイズの異なる画像には共用できない。そこで，max-height:100vhを使えば画像の高さを指定する必要がなく，複数サイズの画像でコードを共用できる。ただし，max-heightはdiv要素には効かず，img要素に直接指定する必要がある。画像にキャプションをつける場合などには使えないので，上のコードを使うことになる。
<style>
.popup_container3 {
position:relative;
}
.popup3 {
max-height:0vh;
overflow:hidden;
position: absolute;
top: -50px;
left: 100px;
opacity: 0;
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
transition-property: max-height,opacity,top;
transition-duration: 1s;
transition-delay: 1s,0s,0s;
}
.popup_trigger3:hover + .popup3 {
transition-duration: 0.5s;
transition-delay: -0.5s,0s,0s;
max-height: 100vh;
opacity: 1;
top: -80px;
}
</style>
<div class="popup_container3">
<a class="popup_trigger3" href="./index.php?key=jobqknn6w-45#_45">
学校だより４月号
</a>
<div class="popup3">
<img src="./?action=common_download_main&upload_id=156" style="border:2px solid rgb(204, 204, 204);" />
</div>
</div>
参考にしたページ
・
cssだけでホバー時にバルーンポップアップを表示させる・
display: noneはtransitionできないので・
width、heightがautoの要素にtransitionを適用する
検索
VB.NET Tips
3Dプリンター
