SOICHI BLOG

【CSS】画像リンクのhover animationパターン集コピペ使用OK
HOME > ホームページ制作 > CSS > 【CSS】画像リンクのhover animationパターン集コピペ使用OK

【CSS】画像リンクのhover animationパターン集コピペ使用OK

投稿日： 更新日：
CATEGORY
#

リンクになった画像のホバーアニメーションの事例をいくつか紹介します。コードも掲載しているのでコピペしてご活用下さい。（※画像やサイトの幅に応じて若干の調整が必要な場合もあります。）

hoverすると少し薄くなる

このパターンはよく見かけますよね。カーソルを合わせると画像の透明度が80％になるだけなので簡単なコードを記述するだけです。特にこだわりがないときはこれを設定すればよいでしょう。

DEMO

HTML

<a href="#" class="image_link">
  <img src="画像のURL" alt="画像の説明文">
</a>

CSS

.image_link{
  display:block;
}
.image_link img{
  transition:0.3s;
  display:block;
  width:100%;
}
.image_link:hover img{
  opacity:0.8;
}

hoverすると黒くなる

ホバーすると黒い透けたレイヤーが現れるアニメーションです。黒いレイヤーは疑似要素で作成しています。黒がサイトの雰囲気と合わないときはレイヤーの色をWEBサイトのイメージカラーに変更するだけでも違和感はなくなります。

DEMO

HTML

<a href="#" class="image_link">
  <img src="画像のURL" alt="画像の説明文">
</a>

CSS

.image_link{
  position:relative;
  display:block;
  height:auto;
}
.image_link img{
  display:block;
  width:100%;
}
.image_link:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  background:#000;/*好みの色に変えてください。*/
  opacity:0;
  transition:0.3s;
}
.image_link:hover:before{
  opacity:0.2;
}

任意の文字が画像の上に現れる

リンクの画像にカーソルを合わせると文字が出現するアニメーションです。DEMOでは「READ MORE」になっていますが、疑似要素のcontentで指定する文字は変えることができますのでお好みで設定してみてください。

DEMO

HTML

<a href="#" class="image_link">
  <img src="画像のURL" alt="画像の説明文">
</a>

CSS

.image_link{
 display:block; 
 position:relative;
 text-decoration:none;
}
.image_link img{
  display:block;
  width:100%;
}
.image_link:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  background:#000;/*好みの色に変えてください。*/
  opacity:0;
  transition:0.3s;
}
.image_link:after{
  content:"READ MORE";/*好みの文章に変更してください。*/
  display:block;
  color:#fff;
  line-height:48px;
  width:180px;
  border:solid 1px #fff;
  border-radius:5px;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-1em;
  margin-left:-90px;
  opacity:0;
  z-index:3;
  transition:0.3s;
  font-weight:bold;
  letter-spacing:0.2em;
}
.image_link:hover:before{
  opacity:0.5;
}
.image_link:hover:after{
  opacity:1;
  margin-top:-0.5em;
}

画像が拡大するホバーアニメーション

画像にカーソルを合わせると画像が拡大するホバーアニメーションです。画像の表示範囲は大きくならず画像だけズームアップしトリミングされます。

DMEO

HTML

<a href="#" class="image_link">
  <img src="画像のURL" alt="画像の説明文">
</a>

CSS

このコードは画像が16:9の場合です。画像のアスペクト比が変わる場合はimage_link:beforeのpadding-topを変更する必要があります。ここの数値は画像の横幅に対して高さが何％になるかを記述します。何故こうするか気になる方は下記のページで解説している箇所がありますのでそちらをご覧ください。

https://soichiro.me/cssiframeresponsive/ 
.image_link{
 display:block; 
 position:relative;
 text-decoration:none;
 overflow:hidden;
}
.image_link:before{
  content:"";
  display:block;
  padding-top: 56.25%;/*ここには横幅に対して縦が何%になるかを記述*/
}
.image_link img{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  transition:0.3s;
  display:block;
  width:100%;
}
.image_link:hover img{
  transform:scale(1.1);
}

画像下にバーが出てくるアニメーション

先に紹介した黒いフィルターがかかるパターンの応用編です。画像にカーソルを合わせる黒いフィルターがかかるのと同時に横からバーがアニメーションで出現します。

DEMO

HTML

<a href="#" class="image_link">
  <img src="画像のURL" alt="画像の説明文">
</a>

CSS

.image_link{
  display:block;
  position:relative;
}
.image_link img{
  display:block;
  width:100%;
}
.image_link:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  background:#000;/*好みの色に変えてください。*/
  opacity:0;
  transition:0.3s;
}
.image_link:after{
  content:"";
  display:block;
  width:0;
  height:8px;
  position:absolute;
  bottom:0;
  left:0;
  z-index:3;
  transition:0.3s;
  background:#00a896;/*好みの色に変えてください。*/
}
.image_link:hover:before{
  opacity:0.5;
}
.image_link:hover:after{
  width:100%;
}

カーソルを合わせると白黒だった画像がカラーになる

CSSのfilterを使用したホバーアニメーションです。画像はもともとカラーのものを準備し、filterのsaturateを0%にしておきます。こうすることでカラーの画像を白黒にできます。あとはhoverのときにsaturateを100%に指定するだけです。

DEMO

HTML

<a href="#" class="image_link">
  <img src="画像のURL" alt="画像の説明文">
</a>

CSS

.image_link{
  display:block;
}
.image_link img{
  width:100%;
  filter: saturate(0%);
  transition:0.3s;
}
.image_link:hover img{
  filter: saturate(100%);
}

カーソルを合わせると画像がボケるアニメーション

CSSのfilterでカーソルを合わせたときにblurがかかるようになっています。

DEMO

HTML

<a href="#" class="image_link">
  <img src="画像のURL" alt="画像の説明文">
</a>

CSS

.image_link{
 display:block; 
 position:relative;
 text-decoration:none;
}
.image_link img{
  display:block;
  width:100%;
  transition:0.3s;
}
.image_link:before{
  content:"READ MORE";
  display:block;
  color:#fff;
  line-height:48px;
  width:180px;
  border:solid 1px #fff;
  border-radius:5px;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-1em;
  margin-left:-90px;
  opacity:0;
  z-index:3;
  transition:0.3s;
  font-weight:bold;
  letter-spacing:0.2em;
}
.image_link:hover img{
  filter:blur(5px);
}
.image_link:hover:before{
  opacity:1;
  margin-top:-0.5em;
}

まとめ

以上画像のホバーアニメーションでした。改変したりすれば更にいろいろなパターンが作れそうです。アニメーションをつけてクリック率の向上を図りましょう。

   

© 2024 - SOICHI BLOG