<div class="background">
  <div class="camera">
     <div class="botao"></div>
     <div class="lente"></div>
     <div class="coisinho">
       <div class="detalhe"></div>
       <div class="poraloid">
         <div class="content"></div>
       </div>
     </div>
   </div>
</div>

html {
  height: 100%;
}
body {
  font-family: open sans;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: #FEF2D8;
}
.background {
  position: relative;
  width: 500px;
  height: 260px;
  text-align: center;
  padding: 30px;
  border-radius: 10px;
}
.camera {
  position: absolute;
  top: 50px;
  left: 160px;
  width: 255px;
  height: 140px; 
  background: #EFC371;
}
.botao {
  position: absolute;
  top: -20px;
  width: 80px;
  height: 20px;
  background: #E1D386;
  transition: background-color 1s;
  cursor: pointer;
}
.botao:active {
  position: absolute;
  top: -20px;
  width: 80px;
  height: 20px;
  background: #EFC371;
  animation: click 1s ease-out;
}
.lente {
  position: absolute;
  top: 15px;
  left: 80px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #EEE7CA;
}
.lente::before {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #2c2a2d;
  content: "";
}
.lente::after {
  position: absolute;
  top: 10px;
  left: 45px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  content:"";
}
.coisinho {
  position: absolute;
  top: 120px;
  width: 255px;
  height: 40px;
  background: #EEE7CA;
}
.coisinho::after {
  position: absolute;
  left: 20px;
  top: 10px;
  width: 215px;
  height: 10px;
  background: #E1D386;
  content:"";
}
.detalhe {
  position: absolute;
  left: 65px;
  top: 20px;
  width: 130px;
  height: 15px;
  background: #fff;
  z-index: 1;
  cursor: pointer;
}
.poraloid {
  position: absolute;
  left: 65px;
  top: 20px;
  width: 130px;
  height: 20px;
  background: #fff;
  z-index: 1;
  opacity: .1;
  cursor: pointer;
}
.poraloid:active {
  position: absolute;
  left: 65px;
  top: 10px;
  width: 130px;
  height: 130px;
  background: #fff;
  opacity: 1;
  transition: opacity 1s;
}
.content{
  position: absolute;
  left: 10px;
  top: 10px;
  width: 110px;
  height: 90px;
  background: #EFC371;
  opacity: 0;
}
.content:hover{
  position: absolute;
  left: 10px;
  top: 10px;
  width: 110px;
  height: 90px;
  background: #EFC371;
  opacity: 1;
  transition: opacity 1s;
}
@keyframes giraa {
  0%   {transform: translateY(0px)}
  100% {transform: translateY(50px)}
}

@keyframes click {
  0%   {transform: translateY(0px)}
  100% {transform: translateY(20px)}
}