CSS3を使った超セクシーなイメージホバーギャラリー!

CSS3を使ったイメージホバー効果ギャラリー

見よこのフラッシュばりのエフェクト効果を!CSS3でこんなにすごいエフェクトをかけられるんです!まるでFlashのようですね。ってかいよいよFlashが・・・と思うこのごろ・・・。

超セクシーなイメージホバーギャラリー

CSS3を使ったイメージホバー効果ギャラリー

デモページ

HTMLサンプル

<div class='img' id='img-1'>
 <div class='mask'></div>
 <img src='http://designstutorial.speedymirror.com/wp-content/uploads/2011/05/01.jpg' />
</div>
<div class='img' id='img-2'>
 <div class='mask'></div>
 <img src='http://designstutorial.speedymirror.com/wp-content/uploads/2011/05/07.jpg' />
</div>
<div class='img' id='img-3'>
 <div class='mask' id='mask-1'></div>
 <div class='mask' id='mask-2'></div>
 <img src='http://designstutorial.speedymirror.com/wp-content/uploads/2011/05/05.jpg' />
</div>
<div class='img' id='img-4'>
 <div class='mask'></div>
 <img src='http://designstutorial.speedymirror.com/wp-content/uploads/2011/05/04.jpg' />
</div>
<div class='img' id='img-5'>
 <div class='mask'></div>
 <mg src='http://designstutorial.speedymirror.com/wp-content/uploads/2011/05/06.jpg' />
</div>
<div class='img' id='img-6'>
 <div class='mask'></div>
 <img src='http://designstutorial.speedymirror.com/wp-content/uploads/2011/05/08.jpg' />
</div>

CSS3サンプル

.img{
 float:left;
 -webkit-transition-duration: 0.5s;
 }
.img img{
 padding:10px;
 border:1px solid #fff;
}
.img:hover{
 -webkit-transform:scale(0.8);
 -webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
 width: 100%;
 background-color: rgb(0, 0, 0);
 position: absolute;
 height: 100%;
 opacity:0.6;
 cursor:pointer;
 -webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
 height:0%;
}
#img-2:hover .mask{
 height:0%;
 margin-top:130px;
}
#img-3 #mask-1 {
 width:50%;
}
#img-3 #mask-2{
 width:50%;
 margin-left:211px;
}
#img-3:hover #mask-1{
 width:0%;
}
#img-3:hover #mask-2{
 margin-left:430px;
 width:0%;
}
#img-4:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
}
#img-5:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
 -webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
 margin-left:219px;
 margin-top:135px;
 height:0%;
 width:0%;
 -webkit-transform: rotateZ(750deg);

一言

HTML5とCSS3の組み合わせで今までにない世界が広がります。今までFlashやjQueryを使っていた動的な表現ができるようになったのは嬉しい限りです。

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/css/335/trackback/