Blog

HOME > Web > css > 【CSS】マウスオーバーで背景拡大アニメーション

【CSS】マウスオーバーで背景拡大アニメーション

2016/03/08

css

備忘録です。

マウスオーバーで背景が拡大するアニメーション効果の方法です。

参考サイト
CSS3で背景画像全面表示（Background Cover）でもマウスオーバーで拡大アニメーション

HTML

<div class="bg-scale">
    <div class="inner">
        <p>Background Scale Animation</p>
        <a href="#" class="btn-more">Article</a>
    </div>
</div>

CSS

.bg-scale {
    position: relative;
    overflow: hidden;
    text-align: center;
    border-top: solid 1px #596456;
    border-bottom: solid 1px #596456;
    text-shadow: 0 0 12px #7b7a35;
    padding: 60px 0;
}
.bg-scale:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(bg.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.bg-scale:hover:after {
    opacity: .8;
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.bg-scale .inner {
    z-index: 1;
    position: relative;
}

サンプル
マウスをのせてください

Background Scale Animation

Article

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

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

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

ホームページ制作問合せ