Заполнение объекта водой

Как сделать чтобы вода в этом примере https://jsfiddle.net/wsygj8q4/2/
 обтекала бутылку, а не накладывалась на нее?



.body {
  width: 149px;
  height: 706px;
  background-image: url("http://s010.radikal.ru/i311/1711/9c/d679c55a8026.png");
  background-repeat: no-repeat;
  background-size: 122px 298px;
  background-position: center;
  position: relative;
  display: inline-block;
  margin: 10px;
}

.body .tank {
  width: 94px;
  height: 182px;
  background-image: url("http://s04.radikal.ru/i177/1711/a6/141640ec7964.png");
  background-size: 103px 180px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: inline-block;
  margin: 23px;
}

#water {
  background-image: url("https://media.giphy.com/media/xTiTnrfZfRPJ520yly/giphy.gif");
  background-position: center;
  position: absolute;
  bottom: 0px;
  opacity:0.3;
  width: 95px;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#tank:hover #water {
  height: 350px;
  background-position: top left;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
}

  

    

      

    
  




    

Ответы

Ответ 1

Можно использовать свойство mask-image - работает во всех современных браузерах
кроме IE. Для этого создадим div-обертку, и наложим на него маску бутылки (для этого сделал b/w бутылку в png):



.body {
  width: 149px;
  height: 706px;
  background-image: url("http://s010.radikal.ru/i311/1711/9c/d679c55a8026.png");
  background-repeat: no-repeat;
  background-size: 122px 298px;
  background-position: center;
  position: relative;
  display: inline-block;
  margin: 10px;
}

.body .tank {
  width: 103px;
  height: 182px;
  background-image: url("http://s04.radikal.ru/i177/1711/a6/141640ec7964.png");
  background-size: 103px 180px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: inline-block;
  margin: 23px 18px;
}

.water-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: inline-block;
  -webkit-mask-image: url("http://s012.radikal.ru/i319/1711/0a/d4a760a32e93.png");
  mask-image: url("http://s012.radikal.ru/i319/1711/0a/d4a760a32e93.png");
}

#water {
  background-image: url("https://media.giphy.com/media/xTiTnrfZfRPJ520yly/giphy.gif");
  background-position: center;
  position: absolute;
  bottom: 0px;
  opacity:0.3;
  width: 103px;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#tank:hover #water {
  height: 350px;
  background-position: top left;
  -webkit-transition: all 3s ease-out;
  -moz-transition: all 3s ease-out;
  -o-transition: all 3s ease-out;
  transition: all 3s ease-out;
}