Как сделать чтобы вода в этом примере 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;
}
<div style="text-align:left">
<div class="body">
<div class="tank">
<div id="water" style="height:50%"></div>
</div>
</div>
</div>
png
бутылки должно быть полупрозрачной, чтобы под ней было видно воду, остальноеz-index
, если я правильно задачу понял