Animated Sun Rays Overlay + CSS

animated-sun-rays-overlay-css.markdown

Animated Sun Rays Overlay + CSS

Animated Sun Rays Overlay Action + CSS

Using the Animated sunlight Photoshop action by PSDDude to create an animated GIF then placing it over an image with "screen" blending mode.

A Pen by Ion Emil Negoita on CodePen.

License.

animated-sun-rays-overlay.markdown

Animated Sun Rays Overlay

Animated Sun Rays Overlay Action

Using the Animated sunlight Photoshop action by PSDDude to create an animated GIF then placing it over an image with "screen" blending mode.

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<h1><a href="https://1.envato.market/c/361744/275988/4415?subId1=codepen&u=https://graphicriver.net/item/sunlight-animated-gif-photoshop-action/20329868">Animated Sun Rays Overlay Action</a></h1>
<p>by <a href="http://www.psd-dude.com">PSDDude</a></p>
<div class="wrap"><img name="your-image" src="https://cdn.pixabay.com/photo/2019/08/14/13/45/sunset-4405820_960_720.jpg" alt="">
  <img class="overlay" src="http://www.psd-dude.com/tutorials/images/animated-sunlight-by-psddude.gif" alt="Animated Sunlight by PSDDude">
</div>

style.css

.wrap{
  position:relative;
  display:inline-block;
}
.overlay{
  position:absolute;
  left:0;  
  top:0;
  bottom:0;
  width:100%;
  height:99%;
  object-fit:cover;
  mix-blend-mode:screen;
}