1. 首頁
  2. 問答
  3. CSS3內部陰影在縮放中消失

CSS3內部陰影在縮放中消失

2014-10-09 139 views
1

我試圖用內部陰影和內部圖像來縮放div。這裏是代碼：CSS3內部陰影在縮放中消失

<!DOCTYPE html> 
    <html> 
     <head> 
      <title> Home Page </title> 
      <style> 

      div#b{ 
       box-shadow:0 0 10px 2px #fff inset; 
       border-radius:10px; 
       width:230px; 
       height:150px; 
       transition: all 1s ease; 
      } 

      div#b:hover { 
       position:relative; 
       z-index:3; 
       transform:scale(1.2,1.2) rotate(0.02deg); 
      } 

      div#b img{ 
       width:230px; 
       height:150px; 
       border-radius:10px; 
       position: relative; 
       z-index:-2; 
      } 

      </style> 
     </head> 
     <body> 

      <div id="b"> 
      <a href="#"> 
       <img src="img.jpg" alt="img" title="myimg"> 
      </a> 
      </div> 

     </body> 
    </html>

問題是，當鼠標懸停在div上，圖像出現在div隱藏內部陰影。

我已經試過z-index：3的div：懸停但沒有結果。 可以幫我嗎？

在此先感謝

來源

2014-10-09 backit

+0

你介意把你的問題到的jsfiddle？它會幫助我們幫助你！ – Morklympious 2014-10-09 12:56:15

回答

0

添加box-shadow: 0 0 10px 2px #fff inset;和display: inline-block;到div#b a

的jsfiddle - DEMO

div#b a { 
    display: inline-block; 
    box-shadow:0 0 10px 2px #fff inset; 
} 
div#b img { 
    width:230px; 
    height:150px; 
    border-radius:10px; 
    position: relative; 
    z-index:-2; 
    vertical-align: middle; 
}

來源

2014-10-09 13:14:49 Anonymous

+0

它的效果很好，但是如果在該圖像之後還有其他圖像，則會在圖像的外部顯示一個白色邊框，將圖像懸停在底部圖像上。看看[JSFiddle]（http://jsfiddle.net/uu9e41bw/），這會更容易理解我的意思。 – backit 2014-10-10 09:15:22

+0

@backit add'vertical-align：middle;'to'div＃b img' - http://jsfiddle.net/hoe6mvLe/ – Anonymous 2014-10-10 09:24:17

+0

好的解決了，它足以將height：150px設置爲一個元素;）非常感謝Mary求助 – backit 2014-10-10 09:27:41

相關問題

 相關問題