如何從內容中的懸停效果獲得邊框

Question

嘿傢伙我在這裏構建了一個漂亮的懸停效果的個人資料卡，但我想有更多的內容懸停效果的邊框。 padding沒有爲我工作，任何線索如何解決它。

我這裏有它的bootply

多數民衆贊成什麼IM演示代碼尋找脫穎而出

.model-card { 
    display: inline-block; 
    position: relative; 
    margin: 0em 0.7em 1.4em 0.7em; 
    background-color: #fff; 
    transition: box-shadow .25s; 
    width: 15em; 
    padding: 0px; 
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25); 
    -webkit-transition: transform 0.3s ease-out; 
    -moz-transition: transform 0.3s ease-out; 
    -o-transition: transform 0.3s ease-out; 
} 

span.hover-content { 
    background: rgba(135,211,183,0.7); 
    color: white; 
    border: 1px solid #fff; 
    cursor: pointer; 
    display: table; 
    padding: 10px; 
    height: 21em; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    opacity: 0; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 
} 

Answer 1

請試試這個CSS：

span.hover-content span { 
    border: 1px solid; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

Answer 2

嘗試使用box-shadow

span.hover-content span { 

    box-shadow: inset 1px 1px #777, 1px 1px #777; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}