Paul Paul - 4 months ago 6x
CSS Question

Multiple background image sizing issue

I am creating a hover effect on an arrow I have. Basically I have two images of the same thing overlapping and then on hover the arrow transitions down to make it appear as two arrows.

The issue I am having is the second arrow that transitions down is being cut off for some reason. At first I thought it was a height issue. I increased the height and it didn't help my case. I am unsure of why this is being cut off.

Here is a Fiddle Click for Fiddle

Does anyone see why the second, transitional arrow is being cut off?

#home-img-arrow-container {
position: absolute;
text-align: center;
width: auto;
bottom: 15%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
#home-img-arrow {
url("") 0px 0px no-repeat,
background-repeat: no-repeat;
height: 83px;
width: 143px;
position: relative;
cursor: pointer;
transition-duration: .5s;
#home-img-arrow:hover {
0px 30px no-repeat,
background-repeat: no-repeat;
-webkit-transform: translate(0px,30px),
transform: translate(0px,30px),
transition-duration: .8s,

<div id="home-img-arrow-container">
<div id="home-img-arrow"></div>


Because the height of your #home-img-arrow is less than the space that it needs. Just put a higher value on its height property, for example, height: 105px.

Updated JSFiddle.