1

CSSトランジションを使用して、ホバー時に固定サイズのコンテナー内で画像を拡大することにより、ズーム効果を作成しようとしています。コンテナー フレームにはボーダーとパディングがあり、画像が大きくなってもそのままにしておきたいです。問題は、それが大きくなると、右と下のパディングが消えることです。

CSSコードは次のとおりです。

.videoframe {
width: 200px;
height: 113px;
border: solid 2px;
border-radius: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
overflow: hidden;
}

.videoframe img {
border-radius: 20px;
width: 200px;
height: 113px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.videoframe img:hover {
width: 300px;
height: 168px;
overflow: hidden;
}

そしてここにHTMLコード：

<div class="videoframe"> <img src="image.jpg" /> </div>

サイズが変更されたときに、画像全体に 10px のパディングを維持する方法はありますか?

4

2 に答える 2

0

トランジションをフレームに転送しました (フレームがホバーされると、トランジションが開始されます)。

働くフィドル

HTML: (別の div を追加)

<div class="videoframe">
    <div>
        <img src="http://www.ac4bf-thewatch.com/initiates/upload/20130909/big_522e1c989c94f.jpg">
    <div>
 </div>

CSS

.videoframe
{
    width: 200px;
    height: 113px;
    border: 2px solid black;
    border-radius: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 10px;
}
.videoframe div
{
    border-radius: 20px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.videoframe img
{

    width: 100%;
    height: 100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.videoframe:hover img
{
    width: 300px;
    height: 168px;
}
于 2013-09-16T18:18:48.543 に答える
-1

申し訳ありませんが、少し混乱しています。親コンテナを画像とともに展開しますか?

もしそうなら、http://jsfiddle.net/NcaAA/を見てください

あなたが使用することができます 

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

と

padding:10px;

必要な幅と高さの合計を考慮した一貫したパディングを維持します。

于 2013-09-16T18:21:21.410 に答える