CODEWITHSUNDEEP
htmlcss
Paul
Paul

Reputation: 3368

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 {
    background:
  url("http:optimumwebdesigns.com/eslich/images/arrow.png") 0px 0px no-repeat,
   url("http:optimumwebdesigns.com/eslich/images/arrow.png");
    background-repeat: no-repeat;
    height: 83px;
    width: 143px;
    position: relative;
    cursor: pointer;
  transition-duration: .5s;
}
#home-img-arrow:hover {
    background:
  url("http:optimumwebdesigns.com/eslich/images/arrow.png") 
  0px 30px no-repeat,
  url("http:optimumwebdesigns.com/eslich/images/arrow.png");
   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>
</div>

Upvotes: 0

Views: 34

Answers (4)

Ahmed Salama
Ahmed Salama

Reputation: 2825

You can increase the height of #home-img-arrow to 105px or another solution you can add padding-bottom:23px; and margin-bottom:-23px; to #home-img-arrow:hover

#home-img-arrow:hover {
    background:
  url("http:optimumwebdesigns.com/eslich/images/arrow.png") 
  0px 30px no-repeat,
  url("http:optimumwebdesigns.com/eslich/images/arrow.png");
   background-repeat: no-repeat;
  -webkit-transform: translate(0px,30px),
    transform: translate(0px,30px);
    transition-duration: .8s;
    padding-bottom:23px;
    margin-bottom:-23px;
}

https://jsfiddle.net/n0fbckss/5/

Upvotes: 0

Vivek Tankaria
Vivek Tankaria

Reputation: 1311

Try changing the height of #home-img-arrow to 105px it will work

Working Fiddle

Upvotes: 0

Sudip
Sudip

Reputation: 2051

I added this,

#home-img-arrow {
    padding-bottom:25px;
}

Upvotes: 0

Francisco Romero
Francisco Romero

Reputation: 13199

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.

Upvotes: 2

Related Questions