百見は、一聞にしかず

見てもわからない事は、とりあえず聞いてみよう。

画像の上に文字を重ねたい場合パート2

前回の記事「画像の上に文字を重ねたい場合」が沢山の方に読まれていると勝手に思いパート2を書きたいと思います。

パート2では画像をマウスオーバーした際に文字が下から現れるというサンプルをご紹介します。

完成形は下の通りです。

f:id:lbblue:20170112133201p:plain

「春の風の通り道」という文字の部分ですね。

春はまだまだ先ですが、何となくこの写真にしてみました。桜も満開ではなく葉桜っぽいですし、何処にでもあるような道並みですがあえてそこに風情を感じてみました。

 

画像はさておき、HTMLは以下の通りです。前回のNEWもあるのでCSSの方はちょっと見づらいですが。

<div class="photo">
    <img src="sample.jpg" />
    <p class="text">NEW</p>
    <p class="my_comment">春の風の通り道</p>
</div>

 

続いてCSSの部分は

.photo {
    width:        500px;
    margin:        0;
    padding:    0;
    position:    relative;
    overflow:     hidden;
}
.photo img {
    width:        100%;
}
.text {
    width:        60px;
    font-size:    12px;
    text-align:    center;
    top: 7px;
    left: -17px;
    transform: rotate(-45deg);
    margin:        0;
    padding:    3px;
    color:        #fff;
    background: #d00;
    position:    absolute;
}
.my_comment {
    padding-top: 10px;
    margin:0;
    color: #fff;
    text-align: center;

    position: absolute;
    bottom: -60px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 40px;
    background: rgba(0,0,0,.6);
    transition: 0.5s;
}
.photo:hover .my_comment {
    bottom: 0;
}

 

以上です。

最初にbottom:-60px;として見えない位置に配置しておき、:hover時にbottom:0;にしています。そして、transition:0.5s;のところで下から文字がスッと出てくる時間をセットします。

これだけでも、動きのあるページに変わるのではないでしょうか。