DEV Community

Cover image for Amazing Profile Card Hover Using HTML & CSS
Nikhil Bobade
Nikhil Bobade

Posted on

Amazing Profile Card Hover Using HTML & CSS

Today I created an Amazing Profile Card. In this Hover Effect, I am using only HTML CSS to create animation.

I hope you find this useful like and save this post also comments about your thoughts and new ideas for a topic. For more content follow me on Instagram @developer_nikhil27.

Thank you!

Top comments (7)

Collapse
 
fjones profile image
FJones

I think it's worth elaborating on BEM: Do not feel tempted to use BEM for your entire application, ever. Use it for self-contained components, and compose those. Using BEM at a scale larger than that leads to two inevitabilities: cases you can't represent properly, and heavy maintenance costs to any reasonably-large changes.
BEM works great for components with moderate nesting - but even there something like Tailwind or styled-components (i.e. CSS in JS) just wins flat-out many times.

Collapse
 
danbmky profile image
Dan Bamikiya

It is a good practice to switch will-change on and off using script code before and after the change occurs.
Adding will-change directly in a stylesheet implies that the targeted elements are always a few moments away from changing and the browser will keep the optimizations for much longer time than it would have.
The browser already tries as hard as it can to optimize everything don't add the will-change property to elements just to wring out a little more speed. will-change is intended to be used as something of a last resort, in order to try to deal with existing performance problems.

Excessive use of will-change will result in excessive memory use and will cause more complex rendering to occur as the browser attempts to prepare for the possible change. This will lead to worse performance.

cc MDN

 
danbmky profile image
Dan Bamikiya

I tested your fork;

  1. Open chrome dev-tools
  2. Select Rendering: dev-to-uploads.s3.amazonaws.com/up...
  3. Open the drawer by pressing Esc
  4. Select Paint flashing and Layer borders
  5. Then I hovered on the image (before and after applying will-change) and I saw no painting (screen flashing green) occurred in both cases and the layer borders were the same in both cases. That means the browser already optimized that animation.

If will-change was adding any more optimizations, there would have been more layers borders and less painting (in this case no paintings happened in both tests).

You could test it on your end to see if I missed anything.

Side-note:
For browsers that don’t support will-change, but benefit from layer creation, such as older versions of Safari and Mobile Safari, you need to use a 3D transform to force a new layer:
transform: translateZ(0);

More on enabling Layer Borders and enabling realtime Paint Flashing, borders meaning 👉 Chromium's source code and Stackoverflow answer by Paul Irish (note the link to debug.cc in this answer is broken so just check the Chromium's source code I linked)

More resources:

Although it is a good property it shouldn't be used to promote elements to a new layer unnecessarily.

If you have promoted an element to a new layer, use DevTools to confirm that doing so has given you a performance benefit. Don't promote elements without profiling.

I also agree with you that if the element is going to be animated constantly (for example scroll animations) and there's a performance benefit its much better to use the will-change property in the stylesheets.

Side-note:
If anyone notices any performance benefit when testing this fork, know that will-change optimizations depends on the resources (memory, computing power) available to your browser, meaning it varies in user machines (both desktops, laptops and mobile phones). So me not seeing any optimizations could mean my machine has enough resources for my browser to optimize the animation itself.

Collapse
 
mariog8 profile image
Mario Golik

Pretty good 😉👍
Little, tiny suggestion. I think box shadow is enough for hover, but that's just my subjective opinion.
Keep on Coding ;) Best regards :)

Collapse
 
abhilearnstocode profile image
Abhii

Whoa!! That was pretty a stuff Luke.. 🤩
Learned a lot from the comment.

This is why the developers community is the best!! Always ready to help and spread knowledge.

Keep sharing!

Collapse
 
nikhil27b profile image
Nikhil Bobade

Good recommendation

Collapse
 
forkbikash profile image
Bikash Mishra

Good one!