Transition without moving background (CSS and HTML) - html

Question

I'm still new in coding, so you'll see some unnecessary codes in the css..
My problem is, I want to make the background stays/static when hovered, I believe my hover style is called "slide".. But when I hover on, the background did hover too. So, I need a help on how to make the background static when hovered.
p/s: please remain the margin for avpb :)
CSS:
#avpb {
background: rgba(0, 0, 0, 0.6);
width: 160px;
height: 220px;
border: 1px solid #000000;
padding: 19.5px;
margin-top: -10px;
margin-left: 555px;
position: absolute;
}
#avp {
position: absolute;
width: 160px;
height: 220px;
}
#avp img {
position: absolute;
z-index: 0;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
transition:all .3s ease-out;
}
#avp:hover > .overlay {
opacity: 1;
width: 160px;
height: 220px
height:auto;
background: rgba(0, 0, 0, 0.6);
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,10px);
-ms-transform:translate(0px,10px);
-o-transform:translate(0px,10px);
transform:translate(0px,10px);
}
.button {
width: 160px;
height: 220px;
position: absolute;
}
.button a {
font-family: Lato;
font-size: 10px;
letter-spacing: 1px;
width: 80px;
height: 25px;
line-height: 25px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #000000;
text-align: center;
text-decoration: none;
padding: 5px;
color: #ffffff !important;
display: block;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
.button a:hover {
background: rgba(0, 0, 0, 0.6);
border: 1px solid #4cd1db;
color: #4cd1db !important;
text-decoration: none;
letter-spacing: 2px;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
HTML:
<div id="avpb">
<div id="avp">
<img src="http://www.imvu.com/catalog/web_av_pic.php?u=87116145">
<div class="overlay">
<div class="button">
<br>
<br>
add
<br>
message
</div>
</div>
</div>
</div>
Here's a JSFiddle

Answer 1

You should just let the .button transform then. I added some styles to your css file, hard to explain, just try and compare it with your original code :).
#avpb {
background: rgba(0, 0, 0, 0.6);
width: 160px;
height: 220px;
border: 1px solid #000000;
padding: 19.5px;
margin-top: -10px;
margin-left: 555px;
position: absolute;
}
#avp {
position: absolute;
width: 160px;
height: 220px;
}
#avp img {
position: absolute;
z-index: 0;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.button{
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#avp:hover>.overlay {
opacity: 1;
width: 160px;
height: 220px height:auto;
background: rgba(0, 0, 0, 0.6);
}
#avp:hover>.overlay>.button {
opacity: 1;
width: 160px;
height: 220px height:auto;
-webkit-transform: translate(0px, 10px);
-moz-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
-o-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
.button {
width: 160px;
height: 220px;
position: absolute;
}
.button a {
font-family: Lato;
font-size: 10px;
letter-spacing: 1px;
width: 80px;
height: 25px;
line-height: 25px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #000000;
text-align: center;
text-decoration: none;
padding: 5px;
color: #ffffff !important;
display: block;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
.button a:hover {
background: rgba(0, 0, 0, 0.6);
border: 1px solid #4cd1db;
color: #4cd1db !important;
text-decoration: none;
letter-spacing: 2px;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
<div id="avpb">
<div id="avp">
<img src="http://www.imvu.com/catalog/web_av_pic.php?u=87116145">
<div class="overlay">
<div class="button">
<br>
<br>
add
<br>
message
</div>
</div>
</div>
</div>

Answer 2

You are transforming/translating the div to be 10 pixels down:
-webkit-transform:translate(0px,10px);
-moz-transform:translate(0px,10px);
-ms-transform:translate(0px,10px);
-o-transform:translate(0px,10px);
transform:translate(0px,10px);
Delete these and it should work fine.