【CSS】CSS3とSASS / LESSで作成されたキャプションホバーエフェクト。InContent

InContentはCSS3とSASS / LESSで作成された画像のキャプションホバーエフェクト。アニメーションにはrotateやopenなど12種類が準備されています。

SASS

<link rel="stylesheet" href="css/sass-compiled.css" type="text/css" />

LESS

<link rel="stylesheet" href="css/less-compiled.css" type="text/css" />

HTML

<div class="pic">
<img src="img/01.jpg" class="pic-image" alt="Pic"/>
<span class="pic-caption bottom-to-top">
<h1 class="pic-title">Pic Title</h1>
<p>Some description or text.</p>
</span>
</div>

Effects

.pic-title 画像コンテンツのタイトル
.bottom-to-top Effect bottom to top
.top-to-bottom Effect top to bottom
.left-to-right Effect left to right
.right-to-left Effect right to left
.rotate-in Effect rotate in
.rotate-out Effect rotate out
.open-up Effect open up
.open-down Effect open down
.open-left Effect open left
.open-right Effect open right
.come-left Effect come to left
.come-right Effect come to right

ライセンスはMIT。

 
incontent

【CSS】CSS3とSASS / LESSで作成されたキャプションホバーエフェクト。InContent

  • LATEST
  • RELATED
  • POPULAR