# Supplementary Code for Material Design

**URL:** <https://meta.discourse.org/t/supplementary-code-for-material-design/47369>\
**Category:** UX\
**Created:** [July 15, 2016, 6:47pm UTC](https://meta.discourse.org/t/supplementary-code-for-material-design/47369 "2016-07-15T18:47:51Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Idan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/idan/32/198212_2.png) [@Idan](https://meta.discourse.org/u/Idan)\
**Post date:** [July 15, 2016, 6:47pm UTC](https://meta.discourse.org/t/supplementary-code-for-material-design/47369/1 "2016-07-15T18:47:51Z")

</div>

I use this code to create hover animation for topic avatars.

Can you provide me with how to translate the recommended Google Material Design to pixels.

Here’s my code:

```
`.topic-avatar img {
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: box-shadow 0.3s ease-in-out;
  transition: transform .2s ease-in-out;

```

}

```
.topic-avatar img:hover {
 box-shadow: 0 8px 10px rgba(0,0,0,0.3);
 transform: scale(1.1);
 image-rendering: auto;
 image-rendering: crisp-edges;
 image-rendering: pixelated;

 }

```

`

Looks prety neat. try it out.

The image resize isn’t sharp because the original icon size is small and have no room to animate. I used image-rendering to sharpen when it’s hover, but it’s still not perfect. I see if I the image rendering can work while the transition is taking effect.

---

_[View the full topic](https://meta.discourse.org/t/supplementary-code-for-material-design/47369)._