We use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Today we’d like to share some image reveal effects with you. We hope this set inspires you and gives you some ideas for your next project. The effects are either powered by CSS and with the help of Greensock and ScrollMagic.

COIDEA - Inspiration for image reveal effects

Attention: We are using some modern CSS techniques and properties for the demos (grid, flexbox) so please view them in a modern browser.

Example Image Reveal Effect

We are showing four reveal effect. Here can you see HTML structure for one of them. HTML structure is "shared" [ all divs (except div ".overlay") are same for all four effects ].

<!-- COIDEA:demo:effect-1st START -->
<section class="page-wrapper effect-1st" id="coidea">

  <!-- COIDEA:demo:grid START -->
  <div class="grid">

    <!-- COIDEA:demo:grid-item START -->
    <div class="grid-item effect-first">

      <div class="image">
        <img src="path/to/yuor/image.jpg" />
        <div class="overlay"></div>
      </div>
      <div class="content">
        <h2><!-- Headline Text --></h2>
      </div>

    </div>
    <!-- COIDEA:demo:grid-item END -->

  </div>
  <!-- COIDEA:demo:grid END -->

</section>
<!-- COIDEA:demo:effect-1st END -->

Almost all CSS structure is "shared" and here can you see this "shared" structure.

body section#coidea {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  height: 100vh;
  overflow: hidden;
  padding: 20px;
}

body section#coidea .grid {
  position: relative;
  display: block;
  width: 100%;
  width: calc( 100% - 64px );
  max-width: 992px;
  height: auto;
  margin: 0 auto;
  padding: 128px 32px 32px;
  overflow: hidden;
}

body section#coidea .grid .grid-item {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  height: 100vh;
  overflow: hidden;
  padding: 32px 0;
}

body section#coidea .grid .grid-item .image {
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  overflow: hidden;
  float: left;
}

body section#coidea .grid .grid-item .image img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

body section#coidea .grid .grid-item .content {
  position: absolute;
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  padding-left: 480px;
  overflow: hidden;
  float: left;
}

body section#coidea .grid .grid-item .content h2 {
  /* text-transform: uppercase; */
  letter-spacing: 2px;
  opacity: 0;
}

References and Credits