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

#html #css #html5 #css3

Я нашел эту картину в Интернете, и  хотел бы реализовать подобный эффект на моем сайте.
Попытался сделать более темный фон, лампу разместить сверху, а картинку разместить
под ней.
Но я хочу, чтобы свет от лампы выглядел так, как будто он  светится на картинке.
  Возможно ли это сделать?    

Перевод вопроса: CSS light (fading)
    

Ответы

Ответ 1

Вы можете использовать несколько псевдоэлементов для создания этого эффекта, включая
linear gradient и transforms:    

Демо [Наведите курсор на изображенние, чтобы увидеть этот эффект]     



.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%;
}

  





Перевод ответа: CSS light (fading) effect @jbutler483