Create A CSS Curtain Reveal Effect

In this tutorial I’ll show you how to create a reveal effect (or curtain effect) with CSS.This effect can be used in different cases, for example show extra information only on hover so it doesn’t look too cluttered or just add a simple but nice interaction.

Demo Download

CSS Reveal Effect From Top

Let’s have a look at the first example which a hover reveal effect coming from the top.

HTML

Here we are using two images of the same logo but different colour.

<div class="container from-top">
    <a href="/info">
        <span class="overlay">
            <img width="290" height="167" class="img" src="img/img_w.png">
            <span class="text">CLICK TO SEE MORE</span>
        </span>
        <img width="290" height="167" class="img" src="img/img_b.png">
    </a>
</div>

CSS

We want to overlay the two images but hide the one on the top and reveal it only when being hovered. It’s going to look like the logo changes colour.

.container {
    width: 290px;
    height: 290px;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    position: relative;
    float: left;
    margin-right: 25px
}
a {
    display: block;
    position: relative
}
.overlay {
    background: #27a2a9 none repeat scroll 0 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: all .6s cubic-bezier(.9,0,.1,1) 0s;
    z-index: 1
}
.overlay .text {
    color: #fff;
    margin-top: -25px;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-transform: none;
    top: 100%;
    transition: all .7s ease 0s;
    visibility: hidden;
    width: 100%
}
.img {
    margin: 15px auto 40px;
    display: block;
    height: auto
}
.from-top a { border-top: 6px solid #27a2a9 }
.from-top .overlay { max-height: 0 }
.from-top a:hover .overlay { max-height: 100% }
a:hover .text {
    opacity: 1;
    visibility: visible
}

Now go ahead and try it. Also have a look at the demo as there are other examples. Don’t forget to share this tutorial to support the site.

Demo Download