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