CSSで画像をマウスオーバーで拡大する方法
- CSSを使用して画像をマウスオーバーした際に拡大する方法を紹介します。HTMLの構造を変更せずにCSSを追加するだけで簡単に実現できます。
- img要素にtransitionプロパティを追加し、マウスオーバー時の拡大アニメーションを設定します。さらに、親要素であるentry_bodyの幅を指定してoverflowをhiddenに設定することで、画像枠を固定します。
- ただし、現在のCSSではoverflow:hiddenが正常に機能していないようです。img要素に:hoverを追加した際に拡大されるものの、画像枠が拡大されずに固定されません。
- ベストアンサー
CSSに詳しい方
ブログで「マウスオーバーで画像を拡大」っていうのを取り入れたいのですが、上手くいきません。 画像は拡大されますが、外枠を固定できず困ってます。 http://webya-tm.com/archives/1703 こちらのページを参考に 「画像をマウスオーバーしたときに「拡大」する」がやりたいことです。 <html> ・・・ <div class="entry_body"> <p style="text-align: right;">公開日：2014/10/04</p> <img src="http:～.jpg" alt="～" title="～" border="0" width="600" height="294" /> ＜本文＞ </div> ・・・ </html> htmlの構造的にはこういう感じになってて、 <img src="http:～.jpg" alt="～" title="～" border="0" width="600" height="294" /> の部分を <div class="img-block"> <img src="http:～.jpg" alt="～" title="～" border="0" width="600" height="294" /> </div> と書き換え、さらにCSSに .img-block { width: 600px; height: 300px; overflow: hidden; } と追記すれば上手くいきました。 ただ、すべての<img src～の部分を <div class="img-block"> <img src～ </div> と書き換えるのは、すごく大変な作業なので、その方法以外で 今のままのHTMLで、CSSを書き換えるだけで http://webya-tm.com/archives/1703 こちらのページの「画像をマウスオーバーしたときに「拡大」する」を やる方法はないでしょうか？ ↓今のCSSです。 img { transition: 0.4s; } .entry_body { width: 600x; overflow: hidden; } 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); } ※overflow: hidden;というのが働いてくれない状態です。
- yaritai
- お礼率13% (7/52)
- CSS
- 回答数2
- ありがとう数9
- みんなの回答 （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インスペクター」
関連するQ&A
- CSSのみで作る横ドロップダウンメニュー
教えてください。白旗です。 クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> </div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }
- 締切済み
- HTML
- CSSで表示が、、、
写真を並べているページなのですが、 firefox と IE での縦のスペースの空き具合が異なってしまいます。 IEで見ると、firefoxよりも大きく立て幅が空いてしまい 揃ってくれません。 回避策をググって色々試してみたのですが 上手くいきませんorz ひょっとしたらコード的にどこかおかしいのかも しれないのですが、、、どなたか助言をお願いしますm(_ _)m -- html-- <div class="navi" > <div class="pic2"><a href="01.html"><img src="pic/1mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="02.html"><img src="pic/2mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="03.html"><img src="pic/3mini.jpg" width="200" height="147" border="0" /></a></div> <div class="pic2"><a href="04.html"><img src="pic/4mini.jpg" width="200" height="151" border="0" /></a></div> </div><!--navi--> -- 外部CSS -- .pic2 { float: left; margin-left:30px; margin-top:20px; } .navi { clear:both; margin-top:40px; }
- ベストアンサー
- CSS
- jqureryスライドショーが上手くいきません。
こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }
- ベストアンサー
- その他（プログラミング・開発）
- テーブルの形に沿って画像を作り、貼り付けたら見るブラウザによって余白が生じる。
現在、角丸テーブルを使ってWebページを作っておりまして 角丸部分の形に沿って画像をつくり、貼り付けているのですが、保存しアップしてみると IEでは自分が作ったように見れるのにOperaとFireFoxでは上部分に余白が生じます。 どのようにしたら、余白を無くせるでしょうか？ テーブル部分とその部分のタグはこのようになっています <div align="center"> <div style="width:750"> <div class="kado"> <div class="kado1">-</div> <div class="kado2">-</div> <div class="kado3">-</div> <div class="kado4">-</div></div> <div class="kado5"> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="TitleTable"> <tr valign="top" style="position:relative; top:-4;"> <td width="5" colspan="4"> <img src="./img/TitleSpace-Left.png" width="5" height="41" alt="TitleSpace"></td> <td width="183"> <img src="./img/Title2.png" width="183" height="41" alt="Title"></td> <td width="557"> <img src="./img/TitleSpace.png" width="557" height="41" alt="Title" ></td> <td width="5"> <img src="./img/TitleSpace-Right.png" width="5" height="41" alt="TitleSpace"></td></tr> </table> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="MenuTable"> <tr style="position:relative; top:-4;"> <td width="33"> <a href="index.htm" target="_self"><img src="./img/HomeIcon.png" width="33" height="25" border="0" alt="ReturnHome"> </a> </td> <td><br></td> </tr> </table> </div> <div class="kado"> <div class="kado4">-</div> <div class="kado3">-</div> <div class="kado2">-</div> <div class="kado1">-</div> </div> </div> </div> 外部読み込みでこの角丸にするためのCSSもいれてます <!-- .kado { background: ./img/wall.png; } .kado1 { margin: 0 5px;height:1px;overflow: hidden; background-color:#fff; } .kado2 { margin: 0 3px;height:1px;overflow: hidden; background-color:#fff; } .kado3 { margin: 0 2px;height:1px;overflow: hidden; background-color:#fff; } .kado4 { margin: 0 1px;height:1px;overflow: hidden; background-color:#fff; } .kado5 { margin:0px; padding:0px; background-color:#fff; } --> おそらく何かがおかしいとは思うのですが、よくわかりません。 下らない質問だとは思いますが、回答の程お願いします。 そのWebページのURIも乗っけておきます。 http://wing2.jp/~movie_village/index2.htm
- ベストアンサー
- CSS
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- <a>の中のimgの一部分だけを見せたい
imgの拡大切り取りを以下の様にしました。 <div style="position: relative; width: 240; height: 240; overflow: hidden;"> <img src="imgA.jpg" style="width: 3600; height: 4800; margin-left: -2936; margin-top: -3272;"> </div> この要領で、<a>の中に入れるjpgを切り取り拡大した物にしたいです。 しかし、<a>の中に<div>を入れるとIEは動作が変になります。 どうしたらよいでしょうか？ 具体的には以下のようなソースでして、 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg ul li a:hover{ position: static; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; cursor: default; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <div style="position: relative; width: 240; height: 240; overflow: hidden;"><img src="imgA.jpg" style="width: 3600; height: 4800; margin-left: -2936; margin-top: -3272;"></div> <ul> <li><a href="javascript:void(0);"><img src="imgB.jpg" width="80" height="80" alt=""><span><img src="imgB.jpg" width="240" height="240" alt=""></span></a></li> <li><a href="javascript:void(0);"><img src="imgC.jpg" width="80" height="80" alt=""><span><img src="imgC.jpg" width="240" height="240" alt=""></span></a></li> <li><a href="javascript:void(0);"><img src="imgD.jpg" width="80" height="80" alt=""><span><img src="imgD.jpg" width="240" height="240" alt=""></span></a></li> </ul> </div> </body> </html> ３つの<li>の中の<a>の中のimgを拡大縮小したいのです。 以上、宜しくお願いいたします。
- ベストアンサー
- CSS
- ＣＳＳで自動改行させたくない。
スタイルシートやテーブルで、幅を指定してあげると その幅にあわせて自動改行したりとか、その枠内の背景だけを 変更することができると思うんですが。 スタイルシートでやっても、なぜかうまくいきません。 今は、あきらめてテーブルでやってるんですが。 何がよくないのか、教えていただければ幸いです。 根本的な基本が、わかってないんですかね？ ＣＳＳ #main { width:760px; overflow:visible; } #head { width:760px; bgcolor: #ff0000; } .head-img { padding: 0px; margin: 0px; float:left; } #menu { width:760px; margin: 0px; padding: 0px; bgcolor: #ff0000; } .menu-buttom { margin: 0px; padding: 0px; } ＨＴＭＬ <html> <head> <link href="base.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="main"> <div id="head"> <div class="head-img"><img src="img/head_img.jpg"></div> </div> <div id="menu"> <img src="img/menu_left.gif" width="20" height="30"><img src="img/menu_top.gif" border="0" width="180" height="30" name="img_m1"><img src="img/menu_hp.gif" border="0" width="180" height="30" name="img_m2"><img src="img/menu_com.gif" border="0" width="180" height="30" name="img_m3"><img src="img/menu_inq.gif" border="0" width="180" height="30" name="img_m4"><img src="img/menu_right.gif" width="20" height="30"> </div> </div> </body> </html>
- ベストアンサー
- CSS
- ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。 以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--2ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> <!--3ページ--> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }
- 締切済み
- その他([技術者向] コンピューター)
- 横並びにするCSS
以下のdivタグ内のimgタグを横並びに表示するCSSは .container{ display:flex; } で合っていますか？ <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>
- ベストアンサー
- CSS
- CSSで横並び
divタグ内のimgタグを横並びに表示するCSSは、 .container cf{ display:flex; } で合っていますか？ <body> <section class="container cf"> <div class="hoge"><img src="img1.jpg" alt=""></div> <div class="hoge"><img src="img2.jpg" alt=""></div> <div class="hoge"><img src="img3.jpg" alt=""></div> <div class="hoge"><img src="img4.jpg" alt=""></div> </section> </body>
- ベストアンサー
- CSS
