ホバーオーバーレイを他の写真の上にドロップする方法を教えてください。

Question

私はこれらのボックスを他のものよりも上に浮かべるようにしようとしています。次に

http://sallydrennon.com/xnew/garbage.html

..元のコードに丸みを帯びた角がある（画像なし/ W非常に底四角に見られるように）が、（画像は直角を有するため）鉱山での角は直角です。すべての画像を透明な丸い角を持つpngとして再保存せずにコードを修正する方法はありますか？ （もしそれでもうまくいくならば）また、皮肉なことに、最後に空のボックスが上に表示されているのを見て分かるように、他の画像の上にポップアップ表示します。ここから得て

ここでCSSのコードは次のとおりです。http://tobiasahlin.com/blog/how-to-animate-box-shadow/

<style type="text/css"> 

.box { 
    position: relative; 
    display: inline-block; 
    width: 225px; 
    height: 225px; 
    background-color: #fff; 
    border-radius: 5px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    border-radius: 5px; 
    -webkit-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); 
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 
} 

.box::after { 
    content: ""; 
    border-radius: 5px; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
    opacity: 0; 
    -webkit-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); 
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 
} 

.box:hover { 
    -webkit-transform: scale(2, 2); 
    transform: scale(2, 2); 
} 

.box:hover::after { 
    opacity: 1; 
} 

</style> 

Answer 1

最初に - あなたはボックスが他の上に1を置く場合、あなたはあなたのCSSに.boxクラスに

セカンドをposition: relativeを削除する必要があります - イメージを丸くしたい場合

img { 
border-radius : 54px; 
} 

と最終的なCSSこれは次のようになり.boxクラス

から国境半径を削除するには、

.box { 
    display: inline-block; 
    width: 225px; 
    height: 225px; 
    background-color: #fff; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
    border-radius: 5px; 
    -webkit-transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); 
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); 
} 

img { 
    border-radius : 54px; 
    }