Submitted almost 3 years ago

Mobile First solution

Nate Northway•190

@nnorthway

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Feeling good about just about everything except the sizing of the filter/image overlay element. It's reliant on JS to get the correct positioning - but I know there's a better way to do it. How did you do it?

Community feedback

Byron•2,290

@byronbyronPosted almost 3 years ago

Without javascript, it might look something like this:

body .card .card-image a .filter {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0.66em;
    background: url(../images/icon-view.svg) no-repeat center rgba(0, 255, 247, 0.5);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

body .card .card-image a {
    position: relative;
    display: block;
}

body .card .card-image a img {
    border-radius: 0.66em;
    position: relative;
    max-width: 100%;
    display: block;
}

body .card .card-image a:hover .filter,
body .card .card-image a:focus .filter,
body .card .card-image a:focus-visible .filter {
    visibility: visible;
    opacity: 1;
}

With the above bit of css, you shouldn't need javascript to calculate the height of .filter. Hope that works for you! 👍

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord