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;というのが働いてくれない状態です。
お礼
ご回答ありがとうございます。 次のページには、ＩＥ７はチャイルドセレクタと隣接セレクタのいずれにも対応している旨の記載がありますが実際どうなんですかね。 http://webdesignrecipes.com/css-selectors-and-properties-with-ie7/