CSS Snippets
Tags:
Categories: ,

Code Snippet

If your site has a team-member page with images, names, phone, email, etc., you can create rollovers to show all the pertinent info for each team member.

HTML

<figure class="member_container">
    <img decoding="async" class="team_member" src="/wp-content/uploads/anime-girl.png" alt="Jane Doe" />
    <div class="overlay">
        <div class="member_name">Jane Doe<br><a href="mailto:janedoe@example.com">janedoe@example.com</a></div>
    </div>
</figure>

CSS

.member_container {
    position: relative;
    width: 320px;
    border: red solid 4px;
}
img.team_member {
    width: 100%;
    height: auto;
}
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: all 0.4s ease;
}
.member_container:hover .overlay {
    height: 100%;
}
.member_name {
    white-space: nowrap;
    color: white;
    font-size: 18px;
    text-align: center;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.member_name a {
    color: white;
    text-decoration: none;
    border-bottom: white solid thin;
}

By changing some of the above code to the following, you can change where the rollover comes from.

From the Bottom (default above)

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: all 0.4s ease;
}
.member_container:hover .overlay {
    height: 100%;
}

From the Top

.overlay {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: all 0.4s ease;
}
.member_container:hover .overlay {
    height: 100%;
    bottom: 0;
}

From the Left

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: all 0.4s ease;
}
.member_container:hover .overlay {
    width: 100%;
}

From the Right

.overlay {
    position: absolute;
    bottom: 0;
    left: 100%;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: all 0.4s ease;
}
.member_container:hover .overlay {
    width: 100%;
    left: 0;
}

CSS Notes:

If you like our content, and find it helpful, please consider making a small donation. Thank you!

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.