'How to overlay animated div with changing images over another div both nested in a div?

Lets say I am trying to replicate the following of the site https://www.ideo.com/blog. (I do not need the BlogLandingHeader-MetaTags section)

The div looks like this:

<div>
  <div class="BlogLandingHeader">
    <div class="BlogLandingHeader-Content">
      <h1 class="BlogLandingHeader-Title">The Octopus</h1>
    <div class="BlogLandingHeader-Abstract">
      <p>A designer's view of the universe.</p>
   </div>
  </div>

  <div class="BlogLandingHeader-Takeover">
    <div class="BlogLandingHeader-TakeoverImage" style="background-image: url(&quot;https://new-ideo-com.s3.amazonaws.com/assets/images/static/images/octopus-12-line-tb.svg&quot;);">
    </div>
  </div>
</div>

I have 5 images for BlogLandingHeader-TakeoverImage and want to replicate this div for my work. Please help with html and css codes for the same!

javascripthtmlcsscss-animations


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions