CSS・CSS3

CSSのみで画像のキャプションをスライド表示する方法

img-caption-css

今回は、CSSのみで画像をマウスオーバーすると、キャプションをスライド表示やフェードインで表示させる方法のご紹介です。
CSS3のtransformを利用しています。
一応デモサイトもありますので、ご参考下さい。

デモサイト

HTML

今回のHTMLの構造は、下記のようになりますので、CSSも下記のHTMLに合わせています。

<div class="content">
        <ul class="caption-box clearfix">
        	<li class="demo-1">
            	<img src="img/1.jpg">
        		<span class="caption caption-1">  
        			<p>キャプション</p>  
        	  	</span> 
            </li>
        	<li class="demo-2">
            	<img src="img/2.jpg">
                <span class="caption caption-2">  
        			<h3>見出し</h3>  
        			<p>キャプションキャプションキャプションキャプションキャプション</p>   
        		</span>
            </li>
        	<li class="demo-3">
            	<img src="img/3.jpg">
                <span class="caption caption-3">  
        			<h3>見出し</h3>  
        			<p>キャプションキャプションキャプションキャプションキャプション</p>   
		        </span> 
            </li>
        	<li class="demo-4">
            	<img src="img/4.jpg">
                <span class="caption caption-4">  
        			<h3>見出し</h3>  
        			<p>キャプションキャプションキャプションキャプションキャプション</p>  
		        </span>
            </li>
            <li class="demo-5">
            	<img src="img/5.jpg" id="demo-5">
                <span class="caption caption-5">  
        			<h3>見出し</h3>  
        			<p>キャプションキャプションキャプションキャプションキャプション</p>  
	            </span> 
            </li>
        </ul>
</div>

画像とキャプションのデフォルトスタイル

画像とキャプションのデフォルトスタイルは、下記のようになります。
画像は、ul要素でマークアップしてfloat:leftで並べて表示させています。
また、widthとheightを指定し、overflow:hiddenではみ出す要素は、非表示にしています。
キャプション要素は、背景色を0.8で透過させています。
background-color: rgbaを使用することにより、キャプション内のテキストは、透過させずに、背景色のみを透過します。

/*---------------------------------------------------------
 img style
---------------------------------------------------------*/
.content ul.caption-box li{
   float:left;
   overflow:hidden;
   width:300px;
   height:300px;
   border:5px solid #000;
   margin-top:35px;
   margin-left:55px;
   cursor:pointer;
   position: relative; 
	}
.content ul.caption-box li img{
    position: absolute;  
    left: 0;  
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;	
	}
/*---------------------------------------------------------
caption style
---------------------------------------------------------*/
.content ul.caption-box li .caption{
    background-color: rgba(0,0,0,0.8);  
    position: absolute;  
    color: #fff;  
    z-index: 100;  
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    left: 0;	
	}

キャプションデモ-1

最初のキャプションは、画像にマウスオーバーすると下からキャプションが表示されます。
bottom:-30pxで一旦非表示にして、マウスオーバーでtransform: translateY(-100%)で表示させています。
CSSは下記のようになります。

/*---------------------------------------------------------
 caption 1
---------------------------------------------------------*/
.content ul.caption-box li .caption-1 { 
    height: 30px;  
    width: 300px;  
    display: block;  
    bottom: -30px;  
    line-height: 25pt;  
    text-align: center;  
}
.content ul.caption-box li:hover .caption-1{
    -moz-transform: translateY(-100%);  
    -o-transform: translateY(-100%);  
    -webkit-transform: translateY(-100%);  
    transform: translateY(-100%);  	
	}

デモサイト

キャプションデモ-2

こちらのキャプションは、上から下に向けてスライドのようなキャプション表示になります。
CSSに関しては、【デモ-1】とほぼ同じようなCSSとなります。

/*---------------------------------------------------------
caption 2
---------------------------------------------------------*/
.content ul.caption-box li .caption-2 { 
    width:270px;  
    height:270px;  
    top: -300px;  
    text-align:left;  
    padding:15px;  
}
.content ul.caption-box li:hover .caption-2{
    -moz-transform: translateY(100%);  
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);  
    transform: translateY(100%);  	
	}

デモサイト

キャプションデモ-3

こちらのキャプションは、マウスオーバーでフェードインのように表示されます。
opacity: 0;一旦非表示にし、マウスオーバーでopacity:1;で表示させています。

/*---------------------------------------------------------
  						caption 3
---------------------------------------------------------*/
.content ul.caption-box li .caption-3{
    opacity: 0;  
    width: 270px;  
    height: 270px;  
    text-align: left;  
    padding: 15px; 	
	}
.content ul.caption-box li:hover .caption-3{
    opacity:1;	
	}

デモサイト

キャプションデモ-4

こちらのキャプションは、左から右にスライドしながら表示されます。
left:300pxで非表示にしておいて、transform: translateX(-100%);表示させています。

/*---------------------------------------------------------
caption 4
---------------------------------------------------------*/
.content ul.caption-box li .caption-4{
    width: 270px;  
    height: 270px;  
    text-align: left;  
    padding: 15px;  
    left: 300px;	
	}
.content ul.caption-box li:hover .caption-4{
    -moz-transform: translateX(-100%);  
    -o-transform: translateX(-100%);  
    -webkit-transform: translateX(-100%);  
     opacity: 1;  
    transform: translateX(-100%); 	
	}

デモサイト

キャプションデモ-5

最後のキャプションは、h3とp要素が左から遅延して表示され、画像を拡大表示指定ます。

/*---------------------------------------------------------
 caption 5
---------------------------------------------------------*/
.content ul.caption-box li .caption-5{
    opacity: 0;  
    width: 270px;  
    height: 270px;  
    text-align: left;  
    padding: 15px; 	
	}
.content ul.caption-box li .caption-5 h3,.content ul.caption-box li .caption-5 p{
    position: relative;  
    left: -300px;  
    width: 270px;  
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
	}
.content ul.caption-box li .caption-5 h3{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;	
		
	}
.content ul.caption-box li .caption-5 p{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
	}
.content ul.caption-box li:hover .caption-5{
    opacity:1;	
	}
.content ul.caption-box li:hover #demo-5{
   -moz-transform: scale(1.4);  
   -o-transform: scale(1.4);  
   -webkit-transform: scale(1.4);  
   transform: scale(1.4); 	
	}
.content ul.caption-box li:hover .caption-5 h3,.content ul.caption-box li:hover .caption-5 p{
    -moz-transform: translateX(300px);  
    -o-transform: translateX(300px);  
    -webkit-transform: translateX(300px);  
    transform: translateX(300px); 	
	}

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS typed-js

テキストをタイピングエフェクト風に出来るjQueryプラグインTyped.js使い方

NEXT large_9131894934

htmlやCSSなどのソースコードをWeb上でハイライト表示する方法