Loading...

Single Post

HOME > post > Web > ホバー時に画像をズームさせるエフェクト

ホバー時に画像をズームさせるエフェクト

| Web
ウェブ制作イメージ

ホバー時にバックグラウンドはズームさせ、バナー画像は透過させるエフェクトを作成しましたので、備忘録も兼ねて掲載させて頂きます。バナーはただブランドのロゴ画像にリンクを貼っているだけでは、クリックされる可能性が低いと思い、バックグラウンドにブランドの商品画像などを差し込んで、ひと手間かけたバナーリンクを制作しました。

HTMLは下記


<div class="contaner">
		<div class="banner_1">
		    <div class="inner">
		        <a href="#"><img src="images/banner.png" alt=""></a>
		    </div>
	   </div>
</div>

CSSは下記


		.banner_1 {
		    position: relative;
		    overflow: hidden;
		    text-align: center;
		    width: 350px;

		    text-shadow: 0 0 12px #7b7a35;
		    padding: 15px 0 10px 0;
		}
		.banner_1:after {
		    position: absolute;
		    content: "";
		    display: block;
		    width: 100%;
		    height: 100%;
		    top: 0;
		    background: url(images/sample.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;
		}
		.banner_1:hover:after {
		    opacity: .8;
		    -moz-transform: scale(1.2);
		    -webkit-transform: scale(1.2);
		    -ms-transform: scale(1.2);
		    transform: scale(1.2);
		}
		.banner_1 .inner {
		    z-index: 1;
		    position: relative;
		}

デモを用意したので下のボタンよりご確認ください。

新着記事「マウスオーバーで画像拡大しキャプションをアニメーションでアップスクロール」を記載しました。一緒に閲覧頂けると嬉しいです。

関連記事

Contact Page