Logo proweblab.xyz

Website fog effect

Website fog effect
Website fog effect

Download CSS3 website fog effect html/css/js.

Sometimes a site needs to be decorated with some unusual element, it can be a slider, animation or even a snow effect, which were previously very popular. But not everyone wants to make carbon-copy effects, so they resort to peculiar methods, today we would like to show you how to make a very unusual and animated fog effect on a site using CSS3. The idea is that we will have clouds of smoke that will move on the site reviving its unusual effect, everything looks very simple and creative.


First, we create a simple markup, with a single common class, for the demonstration we installed a demo image, and also added several classes for the fog.

<section class="fog">

<figure class="absolute-bg" style="background-image: url('/1600x900');"></figure>

<div class="fog__container">

<div class="fog__img fog__img--first"></div>

<div class="fog__img fog__img--second"></div>

</div>

</section>