Я нашел эту картину в Интернете, и хотел бы реализовать подобный эффект на моем сайте.
Попытался сделать более темный фон, лампу разместить сверху, а картинку разместить под ней.
Но я хочу, чтобы свет от лампы выглядел так, как будто он светится на картинке.
Возможно ли это сделать?
Перевод вопроса: CSS light (fading)
Ответ
Вы можете использовать несколько псевдоэлементов для создания этого эффекта, включая 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
Комментариев нет:
Отправить комментарий