Show details transition using HTML and CSS

If you've seen the above transition and you liked it then it's time to move on and see how it's built.

It's pretty easy to build something like that using only HTML and CSS, so let's get ready:

We'll start as always with HTML part:

First we'll start off by adding a div container for our image and the mask that we will trigger when the hover selector gets activated:

HTML

     <div class="card">
        <img
          src="...some url"
        />
        <div class="mask">
          <div class="content">
            <h2>Programmer</h2>
            <p>
              You are the best!
            </p>
          </div>
        </div>
    </div>

CSS: The container for our image

Next we're going to write down some basic css:

.card {
  overflow: hidden;
  position: relative;
  background: #fff;
  border-radius: 5px;
}

We need overflow: hidden; because our div with details will be in the same container but just moved down so we can't really see it at first.

Then we need position: absolute; to be able to use top, right, bottom, left properties to move the details div down.

CSS: Adding width and height for our image

We move on to styling the image that will be first loaded. The image needs to be spread throughout the container:

.card img {
  width: 100%;
  height: 100%;
}

CSS: Styling the details mask

Now its time for our details mask to get some styles:

.card .mask {
  opacity: 0.8;
  top: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #181a1c;
  transition: 0.2s;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

The important things here are :

...
  opacity: 0.8;
  top: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
...

We used opacity: 0.85; to make the details div transparent and we moved it from top by 100%;, this means that it is no longer in view, and because we added overflow: hidden; on the container looks like it never existed.

CSS: Triggering our transition

Now to trigger our transition we just need to set the top position to 0 and enjoy:

.card:hover .mask {
  top: 0;
}

I hope you enjoyed, here is the live version