Как анимировать высоту фонового изображения

Question

Я пробовал следующий сценарий, который мне нужен, чтобы анимировать фоновое изображение, как заполнение снизу вверх, при наведении моего div. В то время как моя анимация не похожа на заполнение снизу, а наоборот - скольжение снизу вверх. Может ли кто-нибудь предложить мне правильный способ, как я могу достичь своего результата. Я в порядке с анимацией jQuery, а также анимацией ключевого кадра css3.

Ниже мой код с скрипкой

.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 1

установка background-position быть снизу будет полезно:

.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>

Answer 2

Вы можете сделать это следующим образом. Коричневый div «скользит» снизу вверх. Надеюсь, это то, что вам нужно.

Вы должны использовать свой background images вместо цветов, конечно.

function onClick(){ 
 
    document.getElementById("second").style.height = "0px"; 
 
}

div{ 
 
    position: absolute; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 

 
#first{ 
 
    background-color: brown; 
 
} 
 

 
#second{ 
 
    background-color: beige; 
 
    transition: height 1s; 
 
}

<div id="first"></div> 
 
<div id="second" onclick="onClick()"></div>

Answer 3

Хотя это не является точной копией, вы можете использовать псевдо-элементы, чтобы создать это, устраняя необходимость для изображения на всех:

.square, 
 
.mini-square { 
 
    height: 250px; 
 
    width: 250px; 
 
    background: lightgray; 
 
    position: relative; 
 
} 
 
.square:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border-left: 50px solid white; 
 
    border-right: 50px solid white; 
 
    height: 150px; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 150px; 
 
    z-index: 8; 
 
} 
 
.square:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    border: 125px solid white; 
 
    border-top: none; 
 
    border-bottom-color: transparent; 
 
    width: 0; 
 
    z-index: 8; 
 
} 
 
span { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: 0; 
 
    width: 100%; 
 
    background: blue; 
 
    transition: all 0.6s; 
 
} 
 
.square:hover span { 
 
    height: 100%; 
 
} 
 
.mini-square { 
 
    height: 140px; 
 
    width: 110px; 
 
    z-index: 10; 
 
    position: absolute; 
 
    bottom: 20px; 
 
    left: 70px; 
 
    background: tomato; 
 
} 
 

 
.mini-square:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -70px; 
 
    left: -20px; 
 
    border: 75px solid transparent; 
 
    border-top: none; 
 
    border-bottom-color: tomato; 
 
    width: 0; 
 
    z-index: 8;

<div class="square"> 
 
    <span></span> 
 
    <div class="mini-square"> 
 
    </div> 
 
</div>

Answer 4

Вот мой метод с использованием CSS3 преобразования:

.box{ 
 
    width: 300px; 
 
    float: left; 
 
} 
 
.bg { 
 
    background: url(https://raw.githubusercontent.com/xgqfrms-GitHub/webgeeker/gh-pages/CSS3/bg-images-animation/bg1.png) no-repeat center; 
 
    height: 250px; 
 
    width: 100%; 
 
    position: relative; 
 
    overflow: hidden; 
 
    border: 1px solid red; 
 
} 
 
span { 
 
    background: url("https://raw.githubusercontent.com/xgqfrms-GitHub/webgeeker/gh-pages/CSS3/bg-images-animation/bg2.png") no-repeat; 
 
    height: 150px; 
 
    bottom: -150px; 
 
    right: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    /*background-position: center bottom;*/ 
 
} 
 
.bg:hover span { 
 
    transform: translateY(-150px); 
 
    transition: all .5s ease 0s; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>background-image-scroll</title> 
 
</head> 
 
<body> 
 
    <div class="box"> 
 
     <div class="bg"> 
 
      <span></span> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

demo.gif: Вы можете посетить следующую ссылку, чтобы увидеть разные в отличие от демонстрации: http://webgeeker.xyz/CSS3/bg-images-animation/