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:
<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>
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.
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%;
}
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.
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