ホバー時にバックグラウンドはズームさせ、バナー画像は透過させるエフェクトを作成しましたので、備忘録も兼ねて掲載させて頂きます。バナーはただブランドのロゴ画像にリンクを貼っているだけでは、クリックされる可能性が低いと思い、バックグラウンドにブランドの商品画像などを差し込んで、ひと手間かけたバナーリンクを制作しました。
<div class="contaner"> <div class="banner_1"> <div class="inner"> <a href="#"><img src="images/banner.png" alt=""></a> </div> </div> </div>
.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; }
デモを用意したので下のボタンよりご確認ください。
新着記事「マウスオーバーで画像拡大しキャプションをアニメーションでアップスクロール」を記載しました。一緒に閲覧頂けると嬉しいです。