또한, 두더지 구멍을 CSS로 표현하려고 cell 클래스 태그에 div를 여러 겹 사용했습니다. 구멍 이미지(.hole 태그, mole-hole.png)를 화면상 가장 뒤에 놓고, 두더지(.gopher 태그, gopher.png)와 폭탄 이미지(.bomb 태그, bomb.png)를 그 앞에, 구멍 바깥쪽 이미지(.hole-front 태그, mole-hole-front.png)를 가장 앞에 놓았습니다. HTML에서는 코드에서 아래에 위치한 태그가 화면상으로는 앞에 오게 됩니다. 따라서 코드에서는 .hole 태그가 가장 위에, .hole-front 태그가 가장 아래에 있습니다.
<html>
<head>
<meta charset="UTF-8">
<title>두더지 잡기</title>
<style>
.cell {
display: inline-block; position: relative;
width: 200px; height: 200px;
background: 'yellow'; overflow: hidden;
}
.gopher, .bomb {
width: 200px; height: 200px; bottom: 0;
position: absolute; transition: bottom 1s;
}