スライダーをCSSだけで作ろう

あらかじめエディタに書くコード

                    <div class="slider">
  <div class="content">1</div>
  <div class="content">2</div>
</div>
¥HTML¥
                

                    .slider{
  width: 300px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.content{
  position: absolute;
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 100px;
  text-align: center;
  font-size: 3em;
}
.content:first-of-type{
  background-color: cadetblue;
}
.content:last-of-type{
  background-color: aqua;
}
¥CSS¥
                

期待する画面