Peyman Etedali Peyman Etedali - 7 months ago 8
HTML Question

how to get the Border from the hover effect inside the content

hey guys i build here a nice hover effect on a profile card, but i would like to have the border that i have on the hover effect more inside the content.

padding
didnt worked for me, any clue how to fix it.

i have here a demo code of it on bootply

enter image description here

thats what im looking fore

.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

Please try this css:

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