コンテンツ内のホバー効果からボーダーを取得する方法

Question

ここで私はプロファイルカードにホバー効果を作りますが、ホバー効果の上にホバー効果があるようにしたいと思います。 paddingは私のために働いていませんでした。

私はここに、このCSSを試してみてください何イム

.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

FORE探しbootply

thatsの上のそれのデモコードがあります。

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; 
}