Blog

HOME > Web > css > 【CSS】画像をマウスオンするとボタンなどの要素が表示される方法（オーバーレイ）

【CSS】画像をマウスオンするとボタンなどの要素が表示される方法（オーバーレイ）

2016/03/30

css

備忘録です。

マウスオーバーで画像を重ねる方法です。

サンプルはこちら
マウスオーバーした際の「SEE MORE」をクリックすると露天神社のブログに遷移します。

露天神社

SEE MORE

HTML

<div class="photo">
    <img src="画像のURL" alt="" width="360" height="270">
    <div class="photoOverlay">
        <div class="disp-table">
            <div class="vMiddle">
                <p class="title">露天神社</p>
                <p class="btn"><a href="リンク先のURL"></a>SEE MORE</p>
            </div>
        </div>
    </div>
</div>

CSS

.photo{
    position:relative;
    max-width:300px;
    width:49%;
}
.photo img{
    width:100%;
    height:auto;
}
.photoOverlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    opacity: 0;
    text-align: center;
    color:#fff;
    background: rgba(0,0,0,0.5);
}
.photo:hover .photoOverlay {
    opacity: 1;
    transition: all 1s;
}
.photo .photoOverlay .disp-table{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    display:table;
}
.vMiddle{
    display: table-cell;
    vertical-align: middle;
}
.photo .photoOverlay .vMiddle p.title{
    margin-bottom:20px;
    font-size:130%;
}
.btn{
    position:relative;
    width:60%;
    margin:auto;
    padding:5px;
    text-align:center;
    color:#fff;
    border:1px solid #fff;
    line-height:1;
}
.btn:hover{
    background-color:#ff0000;
}
.btn a{
    position:absolute;
    width: 100%;
    height:100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

photoで要素の大きさを指定しpositionをrelativeにします。
photoOverlayでマウスオーバーした際のbackgroundを指定。
要素を真ん中に固定するためにdisp-tableとvMiddleを指定しました。
あとは好みで編集してください。

ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ