これは、非常にクールな純粋な CSS3 マウスオーバー画像アニメーション効果であり、マウスが画像の上をスライドすると、マスク レイヤーと画像がさまざまな方法で表示されます。各効果セットは 3 つの異なるマウスオーバー画像効果に分かれています。
マウスが画像上をスライドするときのこれらのアニメーション効果はすべて CSS3 を使用して行われます。これらには、スライド効果、傾斜効果、反転効果、回転効果などが含まれます。以下は GIF のプレビュー画像です。
オンラインプレビュー ソースコードのダウンロード
hover-Effects.css ファイルをページに導入します。
<link rel="stylesheet" href="css/hover-effects.css" />
マウスオーバーピクチャーアニメーション効果の 1 つを例に挙げます。その HTML 構造は次のとおりです:
<div class="effect-1"> <div class="image-box"> <img src="img-2.jpg" alt="Image-3"> </div> <div class="text-desc"> <h3>Your Title</h3> <p>......</p> <a href="#" class="btn">Learn more</a> </div></div>
.effect-1{ float: left; width: 340px; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); overflow: visible;}.effect-1 img{ transition: 0.5s;}.effect-1:hover img{ transform: scale(0.3) translateY(-110%); position: relative; z-index: 9;} .effect-1 .text-desc{ transform: translateY(100%); opacity: 0; padding: 85px 20px 10px; transition: 0.5s;} .effect-1:hover .text-desc{ transform: translateY(0px); opacity: 1;}
他の効果の CSS3 実装コードについては、を参照してください。 hover-Effects.css ファイルに追加します。