1

css と Javascript メソッドを使用して、ページ内の画像を拡大しています。正しい方法が得られないコードを使用しました。

助けを求めて、私は以下のフィドルリンクを提供しました

私のCSSは

 #demo {
                overflow: hidden;
                width: 120px;
                text-align: center;
                padding: 10px;
                z-index: 3;
            }

                #demo img {
                    border: none;
                    width: 100px;
                    height: 100px;
                    border: 5px solid #f4f4f4;
                    z-index: 3;
                }

            #enlarge_images {
                ;
                display: none;
                border: 5px solid #f4f4f4;
                z-index: 100;
            }

このフィドルコードを試しました

4

1 に答える 1

1

このフィドルをチェックしてください

ワーキングデモ

あなたのJavaScriptが何をしたのか、何をするつもりだったのか正確にはわかりませんが、これをチェックしてください。

CSS

 #demo img{
     width: 100px;     
     padding: 10px;
     z-index: 3;
 }
 #demo img:hover {
     border: 5px solid #f4f4f4;
    transform: scale(2.8);
      -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
     z-index: 3;
 }

HTML

<div id="demo" >
    <img src="#" />
    <img src="#" />
    <img src="#" />
</div>
于 2013-08-05T08:16:27.047 に答える