@danielmrz-dev
Posted
Fala Cassiano!
Mais um ótimo projeto, parabéns!
Aquele hover effect na imagem é um pouco complicado de fazer, mas você pode gerar ele assim:
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 o nome das classes pra corresponder às do seu projeto!
Espero que ajude!
Fora isso, belo trabalho!
Marked as helpful
@Cassio-Master
Posted
@danielmrz-dev As always I will take your tips on this you just don't understand: Just don't forget to change the name of the classes to match those of your project. But everything else is OK
@danielmrz-dev
Posted
@Cassio-Master
I mean you take this code and change the class names because I coded this and I don't know if your elements will have the same class names. That's it 😊
And sorry for the portuguese comment. I saw your name and I thought you were brazilian 😅
@Cassio-Master
Posted
@danielmrz-dev eu sou brasileiro eu é que pensei que você é Americano e por isso vou para o tradutor e escrevo em inglês 😅.
@danielmrz-dev
Posted
@Cassio-Master
Ahhh sim meu amigo! Eu sou brasileiro também! Então quando for comentar nos seus projetos, vou falar português mesmo 😁
Estou seguindo você e vou acompanhar sua jornada na plataforma. Precisando de ajuda, pode me chamar 🦾
Marked as helpful
