- ベストアンサー
CSSで画像をマウスオーバーで拡大する方法
- CSSを使用して画像をマウスオーバーした際に拡大する方法を紹介します。HTMLの構造を変更せずにCSSを追加するだけで簡単に実現できます。
- img要素にtransitionプロパティを追加し、マウスオーバー時の拡大アニメーションを設定します。さらに、親要素であるentry_bodyの幅を指定してoverflowをhiddenに設定することで、画像枠を固定します。
- ただし、現在のCSSではoverflow:hiddenが正常に機能していないようです。img要素に:hoverを追加した際に拡大されるものの、画像枠が拡大されずに固定されません。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
多分、こんな感じ通るはず（未検証）。 div.entry_body img { width: 600x; overflow: hidden; transition: 0.4s; } div.entry_body img:hover { -moz-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); } 要は「div.entry_body img」でピンポイント指定するのがポイント。こうする事で「<div class="entry_body">に囲まれた<img>のみ」と言う意味になる。でもまあ後々、誤動作の遠因となるので、早い段階で面倒でも個別にimgタグに何らかのclass名を割り振って置いた方が良いと思います。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞と書き換えるのは、すごく大変な作業なので、その方法以外で今のままのHTMLで、CSSを書き換えるだけで ★必ず読んでおくこと→『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』 そして、このサンプルを確認する。 ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) ・(Chromeを除く)ブラウザで[表示]メニューから[スタイル(シート)]を選択してみる。 ・印刷プレビューで印刷状態を確認 ・ウィンドウの幅を変えたりCtrl + ＋/－で拡大や縮小してみる。 ・HTMLソースを確認 『今のままのHTMLで、CSSを書き換えるだけ』には、このようにHTMLには文書構造だけが書かれていることが最大のポイントになるでしょう。HTMLの変更・メンテナンスも簡単。 ★アルバムのようなページでしたらHTMLは次のようになっているはずです。 1)画像とその説明が一つの項目であるリストでマークアップされているはず <dl> <dt>山中湖から望む富士山1</dt> <dd><img src="" width="" height="" alt=""></dt></dd> <dd>コメント</dd> <dd>撮影条件 <ol> <li>シャッター速度、絞り</li> <li>焦点距離</li> </ol> <dd> <dt>山中湖から望む富士山2</dt> <dd><img src="" width="" height="" alt=""></dt></dd> <dd>コメント</dd> <dd>撮影条件 <ol> <li>シャッター速度、絞り</li> <li>焦点距離</li> </ol> <dd> ・・・あるいは、 <ul> <li><img src="" width="" height="" alt=""> <p>コメント</p> </li> ・・・・ そのいずれであっても、可能になりますね。 補足 <img src="http:～.jpg" alt="～" title="～" border="0" width="600" height="294" /> borderは非推奨『推奨しない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#adef-border-IMG )』 いまどき、/> XHTMLは使わなくて良いでしょう。 『HTML5が持つ本当の意味( http://www.atmarkit.co.jp/news/200801/25/html.html )』 <div class="img-block"> class名は文書構造を示す物にしましょう。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 .img-block { きちんと基点となるセレクタを書きましょう。CSS2以降はそうなりました。 HTMLの要素にいちいちclassを付ける必要はありません。HTMLもCSSも煩雑になって「マウスオーバーで画像を拡大」という簡単なことすら面倒になります。 きちんと子孫セレクタ,隣接セレクタ,子供セレクタなどを使用し詳細度によって適用させるようにしましょう。それがカスケーディングと言ってCSS(カスケーディングスタイルシート)の命ともいえる重要な基本というか、それがすべてと言っても良い。 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) ★今のままのHTMLで、CSSを書き換えるだけで これはきちんとセレクタで指定すれば簡単だと思いますが、今までのHTMLの文書構造が分からないと回答のしようがありません。その要素を含むDOMを教えてください。 firefoxだと「DOMインスペクター」
