Menu
Community /Pin to ProfileBookmark
@cootheadOct 03.2021 — #Hi there RaulRogojan
If the edge of the cards are hovered, their dimensions diminish,
so that the hover state ceases. Their dimensions will therefore
simply return to their original state.
The only fix, that I can think of, would be to reverse the effect.
In other words go from small to larger rather than from large
to smaller.
Also note that [b]div elements[/b] are not required in the [b]a elements[/b].
Just use this HTML code...
...and this CSS...
[i]coothead[/i]
Scale hover effect fixed
On my portfolio I have a hover effect on some cards, the problem is that if you hover just on the edge there is a weird effect where it changes scales very fast.
Is there a fix for that?
Sign in
to post a comment3 Comments(s) ↴
0
@cootheadOct 03.2021 — #Hi there RaulRogojan>...the problem is that if you hover just on the edge there
>is a weird effect where it changes scales very fast.
> Is there a fix for that?
If the edge of the cards are hovered, their dimensions diminish,
so that the hover state ceases. Their dimensions will therefore
simply return to their original state.
The only fix, that I can think of, would be to reverse the effect.
In other words go from small to larger rather than from large
to smaller.
Also note that [b]div elements[/b] are not required in the [b]a elements[/b].
Just use this HTML code...
<div class="projects">
<div class="projects-grid">
<a href="summitTechProject.html" class="project-card project-1"></a>
<a href="burgerRestaurantProject.html" class="project-card project-2"></a>
<a href="carousel.html" class="project-card project-3"></a>
<a href="toDoApp.html" class="project-card project-4"></a>
</div>
</div>
...and this CSS...
.project-card:hover {
transform: scale(1.05);
border: 3px solid var(--main-color);
}
[i]coothead[/i]