2013-08-05 21 views
1

放大影像我使用的CSS和JavaScript的方法來放大圖像在一個頁面.. 我使用了一些代碼S的沒有給我一個正確的方式..使用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; 
      } 

我想這小提琴CODE

+0

Perhapse你會好心地解釋爲什麼這是不是你想要的,實際上你_did_想要什麼。 – 2013-08-05 07:40:15

+0

那是什麼;後---> #enlarge_images {?? –

回答

1

看看這個小提琴

WORKING DEMO

不完全相信你的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>