Design comparison
Solution retrospective
If you know a way to make the image effect appear with the blue background as it should, please comment, and if there is an easier way to achieve this effect, as I believe this might not be the best method. Additionally, if you could confirm whether the semantics are correct, it would be extremely helpful.
Community feedback
- @danielmrz-devPosted 10 months ago
Fala Alysson!
Seu projeto ficou show!
Aquele hover effect na imagem é meio chatinho de fazer. Vi que o aparece a imagem, mas não muda a cor quando passa o mouse. Eu fiz desse jeito abaixo, caso você queira ver outras opções de como fazer:
HTML
<img src="images/image-equilibrium.jpg" alt="Equilibrium" class="pic"> <div class="icon"> <img src="images/icon-view.svg" alt="icon-view" class="icon-view"> </div>
CSS
.pic { width: 300px; background: url('images/icon-view.svg') center center no-repeat; background-color: $Cyan-hover; background-size: cover; margin: auto; border-radius: 10px; } .icon { display: grid; justify-content: center; align-items: center; position: absolute; opacity: 0; background-color: $Cyan-hover; width: 300px; height: 300px; border-radius: 10px; } icon:hover { opacity: .5; cursor: pointer; }
Só não esquece de mudar os nomes das classes pra corresponder ao seu projeto.
Espero que ajude!
Fora isso, excelente trabalho!
0
Please log in to post a comment
Log in with GitHubJoin 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