9つの画像のマウスオーバーでキャプションを表示させるアイディア

9つの画像のマウスオーバーでキャプションを表示させるアイディア
このエントリーをはてなブックマークに追加
PR

Some hover effect ideas

DEMO 表示

カードタイプの画像にマウスオーバーをした時に表示するアニメーションのアイディア集です
9つのパターンがあり、どれも実用性のあるものとなっています

個人的には4番目、6番目が好み

 

– CODE –

HTML

<div class="wrapper">
 <h1>More hover card ideas</h1>
 
 <div class="cell style-a">
 <img src="http://lorempixel.com/185/275/abstract/1" />
 <div class="inside">
 <div class="cover top"><h1>Title</h1></div>
 <div class="cover bottom"><p><a href="#">view</a></p></div>
 </div>
 </div>
 
 <div class="cell style-b">
 <img src="http://lorempixel.com/185/275/abstract/2" />
 <div class="inside">
 <div class="cover top"><h1>Title</h1></div>
 <div class="cover bottom"><p><a href="#">view</a></p></div>
 </div>
 </div>
 
 <div class="cell style-c">
 <img src="http://lorempixel.com/185/275/abstract/3" />
 <div class="inside">
 <div class="cover top"><h1>Title</h1></div>
 <div class="cover bottom"><p><a href="#">view</a></p></div>
 </div>
 </div>
 
 <div class="cell style-d">
 <img src="http://lorempixel.com/185/275/abstract/4" />
 <div class="inside">
 <div class="cover top"><h1>Title</h1></div>
 <div class="cover bottom"><p><a href="#">view</a></p></div>
 </div>
 </div>
 
 <div class="cell style-e">
 <img src="http://lorempixel.com/185/275/abstract/5" />
 <div class="inside">
 <div class="cover top"><h1>Title</h1></div>
 <div class="cover bottom"><p><a href="#">view</a></p></div>
 </div>
 </div>
 
 <div class="cell style-f">
 <img src="http://lorempixel.com/185/275/abstract/6" />
 <div class="inside">
 <div class="cover top"><h1>Title</h1></div>
 <div class="cover bottom"><p><a href="#">view</a></p></div>
 </div>
 </div>
 
 <div class="cell style-g">
 <img src="http://lorempixel.com/185/275/abstract/7" />
 <div class="inside">
 <div class="cover top"><h1>Title</h1></div>
 <div class="cover bottom"><p><a href="#">view</a></p></div>
 </div>
 </div>
 
 <div class="cell style-h">
 <img src="http://lorempixel.com/185/275/abstract/8" />
 <div class="inside">
 <div class="cover top"><h1>Title</h1></div>
 <div class="cover bottom"><p><a href="#">view</a></p></div>
 </div>
 </div>
 
 <div class="cell style-i">
 <img src="http://lorempixel.com/185/275/abstract/9" />
 <div class="inside">
 <div class="cover top"><h1>Title</h1></div>
 <div class="cover bottom"><p><a href="#">view</a></p></div>
 </div>
 </div>

</div>

 

CSS (LESS)

@import url(http://fonts.googleapis.com/css?family=Carme);
* { box-sizing: border-box }
body {
 font-family: 'Carme', sans-serif;
 background: #1E2024;
 font-size: 16px;
 
}

@color : rgba(239, 74, 74, 1);

.wrapper {
 margin: 10px auto;
 //width: 615px;
 
 h1 {
 text-transform: uppercase;
 text-align: center;
 color: #2980b9;
 }
}

img {
 transform: scale3d(1, 1, 1);
 position: relative;
 display: block;
}


.grid {
 margin: 10px auto;
 width: 615px;
 &:after {
 content: '';
 display: block;
 clear: both;
 }
}


.cell {
 background: #262932;
 position: relative;
 overflow: hidden;
 float: left;
 margin: 10px;
 transform: scale(1);
 
 &:hover p { margin-top: -1px; }
 
 .inside {
 position: absolute;
 width: 300%;
 left: -100%;
 height: 100%;
 top: 0;
 }
 
 h1, p {
 position: absolute;
 width: 100%;
 left: 0;
 color: #ECECEC;
 text-align: center;
 padding: 10px;
 }
 
 h1 {
 border-bottom: 1px solid #ECECEC;
 }
 
 p {
 // margin-top: -1px;
 border-top: 1px solid #ECECEC;
 }
 
 a {
 color: #ECECEC;
 text-decoration: none;
 }
 
 .cover {
 position: absolute; 
 height: 100%;
 width: 100%;
 padding: 0 33.33333333%;
 left: 0;
 background: @color;
 
 
 
 }
 
 .top {
 top: -50%;
 h1 {
 bottom: 0;
 }
 }
 
 .bottom {
 bottom: -50%;
 }
 
}


/* sliding doors */
.style-a {

 img, .cover {
 transition: all 1s ease;
 }
 
 .top {
 transform : translate(0, -50%);
 }
 .bottom {
 transform : translate(0, 50%);
 }
 
 &:hover {
 img {
 transform: scale(.9);
 } 
 .cover {
 transform : translate(0, 0);
 }
 }

}

.style-b {

 img, .cover {
 transition: all 1s ease;
 }
 
 .top {
 transform : translate(0, -50%);
 }
 .bottom {
 transform : translate(0, 50%);
 }
 
 &:hover {
 img {
 transform: scale(.9);
 } 
 .top {
 transform : translate(0, -75px);
 }
 .bottom {
 transform : translate(0, 75px);
 }
 }

}

.style-c {

 img, .cover {
 transition: all 1s ease;
 }
 .cover {
 opacity: 0;
 }
 .top {
 transform : translate(0, -50%);
 }
 .bottom {
 transform : translate(0, 50%);
 }
 
 &:hover {
 img {
 transform: scale(.9);
 } 
 .cover {
 opacity: 1;
 transform : translate(0, 0);
 }
 }

}

/* slide-in doors */
.style-d {

 img, .cover {
 transition: transform 1s ease;
 }
 
 .top {
 transform : translate(-100%, 0%);
 }
 .bottom {
 transform : translate(100%, 0%);
 }
 
 &:hover {
 .cover {
 transform : translate(0%, 0%);
 }
 }

}

.style-e {

 img, .cover {
 transition: transform 1s ease;
 }
 
 .top {
 transform : translate(-100%, 75px);
 }
 .bottom {
 transform : translate(100%, 75px);
 }
 
 &:hover {
 .cover {
 transform : translate(0%, 0%);
 }
 }

}

.style-f {

 img, .cover {
 transition: transform 1s ease, opacity .5s ease;
 }
 .cover {
 opacity: 0;
 }
 .top {
 transform : translate(-25%, -75px);
 }
 .bottom {
 transform : translate(25%, 75px);
 }
 
 &:hover {
 .cover {
 opacity: 1;
 }
 .top {
 transform : translate(0%, -75px);
 }
 .bottom {
 transform : translate(0%, 75px);
 }
 }

}

/* rotate */
.style-g {

 img, .cover {
 transition: transform 1s ease, opacity .5s ease;
 }
 
 .cover {
 opacity: 0;
 }
 .top {
 transform : rotate(56deg) translate(50px, -60px);
 }
 .bottom {
 transform : rotate(56deg) translate(-50px, 60px);
 }
 
 &:hover {
 .cover {
 opacity: 1;
 transform : rotate(0deg);
 }
 }

}

.style-h {

 img, .cover {
 transition: transform 1s ease, opacity .5s ease;
 }
 
 .cover {
 opacity: 0;
 }
 .top {
 transform : rotate(56deg) translate(50px, -80%);
 }
 .bottom {
 transform : rotate(56deg) translate(-50px, 80%);
 }
 
 &:hover {
 .cover {
 opacity: 1; 
 transform : rotate(0deg);
 }
 .top {}
 .bottom {}
 }

}

.style-i {

 img, .cover, .inside {
 transition: transform 1s ease, opacity .5s ease;
 }
 
 .inside {
 transition: all 1s ease 1s;
 transform : rotate(90deg);
 }
 
 .top {
 transform : translate(0, -75%);
 }
 .bottom {
 transform : translate(0, 75%);
 }
 
 &:hover {
 img {
 transform: scale(.8);
 } 
 .inside {
 transform : rotate(0deg);
 }
 .cover {
 transform : translate(0, 0);
 }
 }

}
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)