※当サイトにはプロモーションが含まれています。
通常、バナー画像に、マウスカーソルを上に持っていくと、画像が少し透明になる処理がされることが多いと思います。
/* リンク画像を透過する */
a img:hover {
opacity:0.7;
}通常、ボタンや画像などは、アニメーション効果を入れた方が、クリック率が高いと言われているので、ちょっと作ってみました。
バナー画像を浮き上がらせるアニメーション
今回、作成したのは、マウスのカーソルを画像の上に持っていくと、画像が少し浮き上がらせて見えるようにしたアニメーションです。
<div class="float-img">
<!-- ここにバナー画像のコードが入る -->
</div>.float-img img {
transition: all 0.3s ease;
}
.float-img a:hover img {
transform: translateY(-4px);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
opacity: 0.9;
}transition: all 0.3s easeは、スタイルが変化するときのアニメーションを設定しています。
ここでは、全てのプロパティの変化に対して0.3秒間のease（ゆっくり開始して、ゆっくり終わる）アニメーションを適用しています。
transform: translateY(-4px)は、画像を垂直方向に-4ピクセル（上方向に）動かしています。
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2)は、画像の周りに薄い影を加えて、浮き上がっているように見せています。
opacity: 0.9は、要素の不透明度を、90%（少し透明）に設定しています。
補足：ワードプレスの「追加CSS」の編集箇所について
現在のワードプレステーマにCSSを追加したい場合、左メニューにある、
外観 > カスタマイズ
を選択します。
追加したいCSSを記述します（コピペして貼り付けます）。
「公開」ボタンを押して保存すれば完了です。
※全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。
なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。
その際は、強制リロード（ハードリフレッシュ）をしてみてください。
各ブラウザごとの、強制リロードの方法は次の通りです。
| Windows | Mac | |
|---|---|---|
| Google Chrome | 【Ctrl＋F5】 【Ctrl＋Shif＋R】 |
【Command＋Shift＋R】 |
| Microsoft Edge | 【Ctrl＋F5】 【Ctrl＋Shif＋R】 |
【Command＋Shift＋R】 |
| Mozilla Firefox | 【Ctrl＋F5】 【Ctrl＋Shif＋R】 |
【Command＋Shift＋R】 |
| Safari(Mac) | ‐ | 【Command＋Option＋R】 |
強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。
楽天市場の検索結果
これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [
2,420円(税込)【送料込】
Capybara Design 竹内 直人 竹内 瑠美 翔泳社コレダケデキホンガシッカリミニツク エイチティーエムエルシーエスエスアンドウェブデザインイッサツメノホンク カピバラデザイン タケウチ ナオト タケウチ ルミ 発行年月：2021年10月14日 予約締切日：2021年08月24日 ページ数：288p サイズ：単行本 ISBN：9
プロの「引き出し」を増やす HTML+CSSコーディングの強化書
3,190円(税込)【送料込】
エムディエヌコーポレーション発行年月：2021年11月29日 予約締切日：2021年11月03日 サイズ：単行本 ISBN：9784295202080 1 基本レイアウト／2 応用レイアウト／3 表組み・フォーム／4 CSS設計／5 マークアップ／6 総合演習 腕前、グングンUP！152通りのサンプルをひたすらコーディング練習！ 本 パソ
1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］ [
2,585円(税込)【送料込】
Mana SBクリエイティブイッサツデスベテミニツクエイチティーエムエルアンドシーエスエストウェブデザインニュウモンコウザダイニハン マナ 発行年月：2024年03月02日 予約締切日：2024年01月04日 ページ数：320p サイズ：単行本 ISBN：9784815618469 Mana（MANA） 日本で2年間グラフィックデザイナー
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやす
2,420円(税込)【送料込】
モダンWeb開発に欠かせない「修正しやすいCSS」 谷拓樹 インプレスウェブ セイサクシャ ノ タメノ シーエスエス セッケイ ノ キョウカショ タニ,ヒロキ 発行年月：2014年08月 予約締切日：2014年07月22日 ページ数：215p サイズ：単行本 ISBN：9784844336358 谷拓樹（タニヒロキ） 株式会社サイバーエー
HTML5＆CSS3デザインレシピ集 [ 狩野祐東 ]
![HTML5＆CSS3デザインレシピ集 [ 狩野祐東 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/7808/9784774187808.jpg?_ex=128x128)
3,025円(税込)【送料込】
狩野祐東 技術評論社BKSCPN_【bookーfestivalーthr】 エイチティーエムエル ファイブ アンド シーエスエス スリー デザイン レシピシ カノウ,スケハル 発行年月：2017年02月 ページ数：640p サイズ：単行本 ISBN：9784774187808 狩野祐東（カノウスケハル） アメリカ・サンフランシスコでUIデザ
