blender feedly hatena Illustrator jquery palette photoshop pocket mail border-color insert-comment file-download person creative-commons-attribution creative-commons-noderivs creative-commons-noncommercial-us creative-commons-public-domain creative-commons-sharealike creative-commons emoji-happy emoji-neutral emoji-sad magnifying-glass file-o clock-o tag bars desktop quill music folder-open embed2 mail4 google facebook facebook3 twitter twitter3 feed4 wordpress pinterest html5 css3
Web

カードUIと好相性!CSSコピペで実装できるサムネイルhoverエフェクト

,
,
カードUIと好相性!CSSコピペで実装できるサムネイルhoverエフェクト

あちこちで見かけるカードUI、ブログなどにも使いやすいですよね!そこで、カードUIにぴったりなサムネイルのhoverエフェクトをいくつか作ってみました。
CSSをコピペすれば何となく使えると思うので、CSS初心者の方や実装が面倒な方はサクッとお使いください!hoverエフェクトとかPCでしか恩恵には預かれませんが…そこはご愛嬌。

ではいってみましょうー!

目次

基本のエフェクト

Type1. シンプルオーバーレイ

こちらが基本のエフェクトです。シンプルに画像の上に半透明のオーバーレイと「Read More」の文字が出てきます。


See the Pen thumbnail-hover-effect-base by Jomo (@commonsense-design) on CodePen.

コード構成

基本のコード構成はこちら。文字サイズや色などは、お好きなように調整してみてください!
それにしても意外に長い記述になりましたね…やっちまいましたね。ちなみにdemoでは、googleのアイコンフォントとOpen-Sansフォントを使っています。

基本のHTML

基本のCSS

基本の仕組み

サムネイルの親要素にdivをつくり、overflow: hiddenposition:relativeに。これで子要素がカードからはみ出したりすることを防ぎ、絶対配置で自由にレイアウトすることができます。
子要素にはfigure(もちろんその中にはimg要素が入ります)と、「Read More」を表示するためのspanを作ります。

親要素にoverflow:hidden

あとは疑似要素などを駆使して、色々飾り付けていくのみ! ちなみに基本のエフェクトでは、オーバーレイ用の背景をfigure::afterで作り、position:absoluteで全面表示に。「Read More」のspanを絶対配置で真ん中にレイアウトします。あとはそれぞれにtransitionopacity:0設定し、hover時にopacity:1にすればOKです。

figureの疑似要素で装飾

hoverエフェクトアイディア

ここからはサムネイル部分のCSSだけを書いていきます!無駄にボリューミィになってしまうのでね…。 基本のCSSコードの/*ここからthumbnailのスタイル設定*/というコメントアウト以降をコピペし直せばOKです。SCSSをご利用の方は、codepenをご参照ください!
HTMLは全て共通で大丈夫ですよ!

Attention
※IEではcssのfilterが効かず…!モノクロ効果やぼかし効果はIEでは再現しません。
※ベンダープレフィックスは省略しています。
※テキストなどの微調整スタイルは省略しています…詳細はcodepenをご覧下さい!

Type2. モノクロ+ぼかし+ズーム

モノクロ+ぼかしの控えめなエフェクト。filterで画像をぼかすとフチがぼやけるので、ついでにズームしてごまかすという…。「Read More」の文字も、微妙に上からフェードインします。


See the Pen thumbnail-hover-effect-1 by Jomo (@commonsense-design) on CodePen.

CSS


Type3. モノクロからカラーに

hoverでモノクロの画像がカラーに変化します。Read Moreの文字はタグっぽく装飾して、左からスライドイン。 モノクロだと画像のテイストがバラバラでも、デザイン的に統一感を出しやすいですね。


See the Pen thumbnail-hover-effect-7 by Jomo (@commonsense-design) on CodePen.

CSS


Type4. カラーオーバーレイ+ワイプイン

上からカラーの背景がスライドしてきます。ポップな感じのエフェクトです。
.thumbnail-wrapper::afterの背景色を変えれば、簡単にイメージチェンジできます。あとtranslateYtranslateXにすると、横スライドにもできます。


See the Pen thumbnail-hover-effect-2 by Jomo (@commonsense-design) on CodePen.

CSS


Type5. モノクロ+ライン

どちらかというとクール系ですかね?


See the Pen thumbnail-hover-effect-3 by Jomo (@commonsense-design) on CodePen.

CSS


Type6. 波動+ズーム

Material designのような波動っぽいエフェクト。波動が広がるのと同時に、Read Moreの文字幅も一緒に広がります。


See the Pen thumbnail-hover-effect-4 by Jomo (@commonsense-design) on CodePen.

CSS


Type7. グラデーションアニメーション

keyflameアニメーションを使うことで、じわじわグラデーションが変化するエフェクトです。グラフィカルな感じを演出できます。

グラデーションのanimation用CSSの生成には、こちらのジェネレーターがおすすめです。
CSS GRADIENT ANIMATOR

See the Pen thumbnail-hover-effect-5 by Jomo (@commonsense-design) on CodePen.

CSS


Type8. ぼかし+枠線アニメーション

ぼかしエフェクトに加えて、疑似要素を駆使して、枠線をアニメーションさせるタイプ。どちらかというとクラシカルな雰囲気ですかね。
枠線のアニメーションは、transitiondelayを使って表現しています。


See the Pen thumbnail-hover-effect-6 by Jomo (@commonsense-design) on CodePen.

CSS


Type9. ひし形ワイプイン

Type4と似ていますが、疑似要素を回転させるだけで印象が変わります。


See the Pen thumbnail-hover-effect-8 by Jomo (@commonsense-design) on CodePen.

CSS


Type10. 透かし+枠+ズーム

親要素の.l-thumbnailに背景色を設定して透過させるエフェクトに、枠線とズーム効果を足しました。背景に設定する色や画像を工夫すれば、ガラッと印象を変えられますよ!


See the Pen thumbnail-hover-effect-9 by Jomo (@commonsense-design) on CodePen.

CSS


まとめ

いかがだったでしょうか?
画像にかけるエフェクトや疑似要素の装飾など、要素を分解して組み合わせれば、もっと色々なパターンのエフェクトが作れると思います。ブログやポートフォリオサイトなど、思い切り遊べるときに使ってみてください!


それでは!