簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

画像ホバーアクションCSS3サンプル

2021/5/7

売り上げをアップさせる価格戦略とは?

CSS3のCSSフィルターを使うことで、かっこいいホバーアクションが可能です。

HTMLはこんな感じで
<div class="sample1">
    <img alt="CSS3でホバーアクション" src="(ここに画像パスを)"  />
</div>

CSSを
.sample1 img{
  transition: all 0.3s ease 0s;
}
.sample1:hover img{
  border-bottom-color: transparent;
  transform: translateY(0.15em) translateX(0.15em);
}

とすると、ボタンの上にマウスを持っていくと、ボタンがへこんだようになります。
CSS3でホバーアクション

また、HTMLを
<div class="sample2">
    <img alt="CSS3でホバーアクション" src="(ここに画像パスを)"  />
</div>

CSSを
.sample2 img{
  transition: all 0.3s ease 0s;
}
.sample2:hover img{
  opacity: 0.6;
}

とすると、ボタンが薄くなります。
CSS3でホバーアクション

合わせ技で
<div class="sample3">
    <img alt="CSS3でホバーアクション" src="(ここに画像パスを)"  />
</div>

CSSを
.sample3 img{
  transition: all 0.3s ease 0s;
}
.hover-action4:hover img{
  opacity: 0.6;
  border-bottom-color: transparent;
  transform: translateY(0.15em) translateX(0.15em);
}
CSS3でホバーアクション

とすると、へこんだ感じになりつつも半透明になります。

HTMLはこんな感じで
<div class="sample4">
    <img alt="CSS3でホバーアクション" src="(ここに画像パスを)"  />
</div>

CSSを
.sample4{
  width: 300px;
  height: 60px;
  overflow: hidden;
}
.sample4 img:hover{
  transform: scale(1.1);
  transition-duration: 0.3s;
}
CSS3でホバーアクション

とすると、画像が拡大します
こちらにも書いたように、ホバーアクションはクリック率を高めるためにも重要なので、お気に入りのホバーアクションを選んでいただけると幸いです。
最後までお読みいただきありがとうございました。

この記事を書いたのは

株式会社AMS 取締役副社長 古倉 功一

2005年からSEOに本格的に取り組み、SEO歴は15年以上。現在はリスティング広告、SEOをメインにしたWebコンサルを提供中。好きな番組:ポケットモンスター。

  • 石川県産業創出支援機構(ISICO)「お店ばたけ」ホームページドクター
  • セミナー講師(Webマーケティング、SEO、PPC広告等)
  • ミラサポ専門家登録(派遣先からの総合評価平均 5点中4.9)
 
常時SSL+スマホサイト最適化の効果の出るホームページが39,800円!
【0120-55-4682】月~金曜9:00~18:00

月~金曜9:00~18:00

メールでのお問い合わせ
AMS簡単ホームページ作成ツール
あなたのサイトをPRしましょう!
AMSマニュアル
よくある質問と回答
AMSお問合わせ

月別アーカイブ