# Push the capsules down

**URL:** <https://forum.freecodecamp.org/t/push-the-capsules-down/442394>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [January 24, 2021, 9:01am UTC](https://forum.freecodecamp.org/t/push-the-capsules-down/442394 "2021-01-24T09:01:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Porphyrogennitos](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/porphyrogennitos/32/199823_2.png) [@Porphyrogennitos](https://forum.freecodecamp.org/u/Porphyrogennitos)\
**Post date:** [January 24, 2021, 9:01am UTC](https://forum.freecodecamp.org/t/push-the-capsules-down/442394/1 "2021-01-24T09:01:45Z")

</div>

This is my [CodePen](https://codepen.io/Porphyrogennitos/pen/xxENwxL).

I’ve used `translateX(-0.5rem)` so that when I hover they go up. When I click the capsules, I want them to go down a bit. I thought that if I put `translateX(-a smaller number)` it would do the trick but **no**.

Can someone help me —without JS —?

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [January 24, 2021, 9:09am UTC](https://forum.freecodecamp.org/t/push-the-capsules-down/442394/2 "2021-01-24T09:09:03Z")

</div>

Negative numbers go one way, positive numbers go the other way

---

<div class="post-metadata">

**Author:** ![Porphyrogennitos](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/porphyrogennitos/32/199823_2.png) [@Porphyrogennitos](https://forum.freecodecamp.org/u/Porphyrogennitos)\
**Post date:** [January 24, 2021, 9:18am UTC](https://forum.freecodecamp.org/t/push-the-capsules-down/442394/3 "2021-01-24T09:18:32Z")

</div>

![Screenshot 2021-01-24 111815](https://global.discourse-cdn.com/freecodecamp/original/3X/4/6/46f58dd651213cb98a2e7ad3e1c7b41a04f67031.png)

Still not working.

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [January 24, 2021, 9:29am UTC](https://forum.freecodecamp.org/t/push-the-capsules-down/442394/4 "2021-01-24T09:29:21Z")

</div>

X refers to the x-axis. If you want it to translate on the y-axis you need to specify that.

---

<div class="post-metadata">

**Author:** ![Porphyrogennitos](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/porphyrogennitos/32/199823_2.png) [@Porphyrogennitos](https://forum.freecodecamp.org/u/Porphyrogennitos)\
**Post date:** [January 24, 2021, 9:34am UTC](https://forum.freecodecamp.org/t/push-the-capsules-down/442394/5 "2021-01-24T09:34:29Z")

</div>

![Screenshot 2021-01-24 113329](https://global.discourse-cdn.com/freecodecamp/original/3X/6/c/6c05987ac815c1ffab8b6e95f43ea5cf73156d26.png)

Still not working. I also changed the `translateX` of the second value but did not fix the problem.

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [January 24, 2021, 6:16pm UTC](https://forum.freecodecamp.org/t/push-the-capsules-down/442394/6 "2021-01-24T18:16:49Z")

</div>

I was able to get it working. I just made your current code positive like suggested.

You currently have the rotate at 90 deg and translateX.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [July 26, 2021, 6:16am UTC](https://forum.freecodecamp.org/t/push-the-capsules-down/442394/7 "2021-07-26T06:16:53Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.