CSS свет с затухающим эффектом

.light { 
  position: relative; 
  height: 300px; 
  width: 300px; 
  display: inline-block; 
  margin-top: 20px; 
} 
 
.light img {/*Image inside*/ 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 100%; 
} 
 
.light:before {/*creates the bulb*/ 
  content: ""; 
  position: absolute; 
  bottom: 100%;/*places above image*/ 
  left: 50%; 
  height: 20px; 
  width: 100px; 
  border-radius: 50%; 
  background: lightgray; 
  transform: translateX(-50%);/*places in center of image*/ 
  z-index: 10;/*places in front of image*/ 
  border: 2px solid dimgray;/*borders add 3D effect to bulb*/ 
  border-bottom: none; 
  border-top: 5px solid #222; 
} 
 
.light:after {/*creates the beam*/ 
  content: ""; 
  position: absolute; 
  transition: all 0.4s; 
  height: 0; 
  width: 100px; 
  top: -10px; 
  left: 50%; 
  transform: translateX(-50%) perspective(400px) rotateX(45deg);/*centers, makes as trapezium*/ 
  transform-origin: top center; 
  background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.8));/*adds fading light*/ 
  z-index: 5;/*places in front of image, but behind bulb*/ 
} 
 
.light:hover:after {/*demo only, add this to .light:after in production*/ 
  height: 80%; 
}

<div class="light"> 
  <img src="http://img1.liveinternet.ru/images/attach/c/2/73/454/73454031_g20436.jpg" /> 
</div>