4

введите сюда описание изображения

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

Свободный перевод вопроса CSS light (fading) effect от участника @user3353335.

1

1 ответ 1

5

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

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

.light {
  position: relative;
  height: 300px;
  width: 300px;
  display: inline-block;
  margin-top: 20px;
}

.light img {/*Изображение внутри*/
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.light:before {/*Создает конус света*/
  content: "";
  position: absolute;
  bottom: 100%;/*расположить над изображением*/
  left: 50%;
  height: 20px;
  width: 100px;
  border-radius: 50%;
  background: lightgray;
  transform: translateX(-50%);/*Поместить в центр изображения*/
  z-index: 10;/*Разместить впнреди изображения*/
  border: 2px solid dimgray;/*бордюры добавляют 3D-эффект лампочке*/
  border-bottom: none;
  border-top: 5px solid #222;
}

.light:after {/*создает луч*/
  content: "";
  position: absolute;
  transition: all 0.4s;
  height: 0;
  width: 100px;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) perspective(400px) rotateX(45deg);/*центры, делает как трапеции*/
  transform-origin: top center;
  background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.8));/*adds fading light*/
  z-index: 5;/*помещается перед изображением, но за лампочкой*/
}

.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>

Свободный перевод ответа от участника @butler483.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.