I am struggling to figure out how to move this div to the bottom. Additionally, I want to create temporary pop-up squares (simple divs) in random directions that will disappear after 50ms.
My attempt to float this box to the bottom did not yield the desired result.
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});.field {
height: 340px;
width: 200px;
}
.box {
background-color: #218D9B;
height: 320px;
width: 160px;
float: bottom;
background-image: url("img/tree.png");
background-size: 100%;
}
.transform {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
}
.transform-active {
height: 0px;
width: 160px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<div class="box transform"></div>
</div>
<input type="button" id="button" value="Click Me" />I hope to achieve an effect where the wood appears to be hiding in the ground.