Benjamin Benjamin - 1 month ago 5
HTML Question

How animate the height of the background image

I have tried the following scenario which I need to animate my background image like filling from bottom to top on hover of my div. Whereas my animation is not like filling from bottom instead its like sliding from bottom to top. Can any one suggest me the right way how I can achieve my result. I am ok with jQuery animation as well and css3 keyframe animation.

Below is my code with fiddle



.bg {
background: url("https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home.png") no-repeat center;
height: 250px;
position: relative;
}
span {
background: url(https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home_animate.png) no-repeat top 32px center;
bottom: 0px;
height: 0;
transition: height 0.5s;
position: absolute;
right: 0;
left: 0;
}
.bg:hover span {
height: 184px;
}

<div class="bg"><span></span>
</div>





Fiddle Link

Answer

setting background-position to be bottom will be helpful:

.bg {
  background: url("https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home.png") no-repeat center;
  height: 250px;
  position: relative;
}

span {
  background: url(https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home_animate.png) no-repeat;
  bottom: 0px;
  height: 0;
  position: absolute;
  right: 0;
  left: 0;
  transition: height .5s;

  background-position: center bottom;
}

.bg:hover span {
  height: 152px;
}
<div class="bg"><span></span></div>