Now Loading...
menu
  • すべて
  • カメラで遊ぶ
  • 写真を楽しむ
  • 旅
  • モノ
  • おすすめツール
  • web制作

cssだけ!画像をhoverしたときの簡単おしゃれエフェクト4つ

cssだけ!画像をhoverしたときの簡単おしゃれエフェクト4つ

cssだけで簡単に実装できる、画像と相性が良さそうなエフェクト4つです。

hoverしたら画像を拡大

最近よく見るあれをやってみます。

 

 

html

<figure class="effect-scale">
 <img src="画像のパス" >
</figure>

 

css

.effect-scale {
 overflow: hidden;
 width: 320px;
 height: 180px;
}
.effect-scale img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.effect-scale img:hover {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

 

overflow: hiddenで拡大したときにはみ出ている部分を隠します。

transitionで変化する時間を制御。

transform: scaleは画像の拡大率です。hoverする前とhover時の拡大率を変えています。

 

hoverで飛び出す。宙に浮いたようなエフェクト

要素全体がふわっと浮かび上がるようなエフェクトです。

このブログの記事一覧ページで実装しているよ。

 

 

html

<div class="effect-float">
 <a>
  <figure>
   <img src="画像のパス" >
  </figure>
 </a>
</div>

 

css

.effect-float a {
  display: block;
  height: 360px;
  box-shadow: 0 2px 4px rgba(3,3,3,.09);
  border-radius: 3px;
}
.effect-float a:hover {
  display: block;
  height: 360px;
  box-shadow: 0 8px 12px rgba(0,0,0,.12);
  border-radius: 3px;
  margin-top:-5px;
}

 

hoverしたときに影の範囲を広げて色を濃くし、透過率を下げました。

5px上に移動させ、浮かび上がったように見せています。

 

透過させて背景色を入れる

html

<figure class="effect-color">
 <img src="画像のパス" >
</figure>

 

css

.effect-color {
  background: #ffafbd;
}
.effect-color img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.effect-color img:hover {
  opacity: .8;
}

 

hoverしたときに画像をopacityで透過させる定番の処理。

ついでに、親要素に背景色を指定するだけでちょっとおしゃれな感じに。

 

透過させて背景色を入れる:背景色をグラデーションにしてみる

css

.effect-color {
  background: linear-gradient(to top, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);
}

 

背景色をグラデーションにすると、また違った見え方に。

 

グラデーションの配色、考えるのめんどくさい。

そんなときはこれだ。

美しいグラデーションのコードをコピーできるサービスが便利。おすすめです。

 

WebGradients

WebGradients は、綺麗なグラデーションがたくさん。180 種類もあるんです。

見ているだけでも飽きないんだな。

「Copy CSS」をクリックするだけでcssをコピーできちゃいます。

 

Grabient

Grabient は色を選択して調整、カスタマイズしたコードをコピーできるサービス。

よく使わせていただいてますが、本当に便利。

 

 

画像と相性が良さそうなエフェクトいろいろでした。

簡単にできるので、ぜひ!

 

share on