CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで画像オーバーレイのホバースライド効果を作成する方法

CSSだけでも、JavaScriptに頼ることなく、画像にマウスカーソルを重ねた際にオーバーレイがスライドして表示される洗練されたホバーエフェクトを実装できます。本記事では、その具体的な作り方をサンプルコードとともにわかりやすく解説します。

実装例

以下は、CSSで画像オーバーレイのホバースライド効果を作成するコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card-container {
    position: relative;
    width: 50%;
}
img {
    display: block;
    width: 100%;
}
.overlay {
    position: absolute;
    bottom: 100%;
    background-color: rgb(55, 74, 179);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease-in-out;
}
.card-container:hover .overlay {
    bottom: 0;
    height: 100%;
}
.caption {
    color: white;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
}
</style>
</head>
<body>
<h1>Image Overlay Slide Example</h1>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg">
<div class="overlay">
<div class="caption">Dog</div>
</div>
</div>
</body>
</html>

動作の仕組み

このエフェクトは、主に以下のCSSテクニックによって実現されています。

  • .overlay：初期状態では height: 0 に設定し、position: absolute と bottom: 100% によって画像の上端の外側に配置します。
  • transition：transition: .5s ease-in-out を指定することで、高さの変化が0.5秒かけてなめらかにアニメーションします。
  • :hover：カードコンテナにマウスを重ねると、オーバーレイの height が 100% になり、同時に bottom: 0 へ移動するため、下からスライドアップするように表示されます。
  • .caption：キャプションは絶対配置で中央に置かれ、白い大きな文字で表示されます。

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSで画像オーバーレイのホバースライド効果を作成する方法

画像にマウスをホバーすると、青色のオーバーレイが下からスライドしながら表示され、中央に「Dog」というキャプションが現れます。

CSSで画像オーバーレイのホバースライド効果を作成する方法

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>