オーバーフローで画像を切り替える

画像にトランジションを使用しようとしています。ここに私はそれをしたいと思います。ホバリングすると、画像のサイズが400 x 400ピクセルに拡大されます。私はそれが遷移しない場合、それはしたくない何オーバーフローで画像を切り替える

は次のとおりです。

（1）ページ上の他の要素に影響を与えます。

（2）それが元のサイズだ超えたときに画像を隠す（ここで、iは、オーバーフロー抱えている：隠されたが、問題）

ここで私は見ず、それに取り組むことができるように私のコードは、別の文書に取り込まれ、コードの残りの部分で

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<style> 
#test img {width:358px; 
      height:298px; 
      transition: all 1s ease; 
      overflow: hidden;} 

#test:hover img {width: 450px; 
       height:400px;} 
</style> 

<div id="test"> 
<img src="Portfolio/Hair_Salon/images/stylist1.png"> 
</div> 
</body> 
</html>

出典

2016-09-15 Nick Wilson

は、私は1つ以上の識別子#test {幅を追加する必要が... –

です358px、高さ：298px;オーバーフロー：隠し;} –

私は、私は1つ以上の識別子#test {幅を追加するために必要な...とすぐに私はここで入力したものについて考えて

それを考え出した：358px、高さ：298pxを。オーバーフロー：非表示;}

出典

2016-09-15 08:03:38

overflow:hidden,height、およびを#testに入力する必要があります。：そして、ここでは

#test { 
    width : 358px; 
    height : 298px; 
    overflow:hidden; 
} 

#test img { 
    width : 100%; 
    height : 100%; 
    transition: all 1s ease; 
} 
#test img:hover { 
    width: 450px; 
    height:400px; 
} 

<div id="test"> 
    <img src="http://www.nzhistory.net.nz/files/hero_jean-batten-1934_1.jpg"> 
</div>

例を働いて#test

にあなたのimg幅を100％に設定すると、ここで私はそれを考え出したフィドルhttps://jsfiddle.net/mc6v6r71/

出典

2016-09-15 08:09:20

私は実際にこれを投稿... –

オーバーフローで画像を切り替える

答えて

関連する問題