CODEWITHSUNDEEP
csstailwind-css
Dylan Taylor
Dylan Taylor

Reputation: 69

Tailwind increase height upwards on hover

I have built the following interface using only the utility classes available in Tailwind css. When a down icon is hovered, the following menu correctly expands downwards:

enter image description here

My problem is with the up icon. When it is hovered, it also expands downward - I would like for it to expand upward but am struggling to figure out how to do so. Here is my current implementation (syntax is React/JSX):

<div className="flex flex-col w-auto h-6 text-xl transition duration-300 transform transition-height hover:h-40 overflow-hidden ease-out">
  {colors.reverse().map((color) => (
    <div
      className={`text-${color}-400 w-6 h-6 rounded-full transform hover:cursor-pointer hover:bg-${color}-200 text-center`}
    >
      <FontAwesomeIcon icon={icon} />
    </div>
  ))}
</div>

In addition to expanding upwards, I would also like for it to not push the preceding div/content further up, but instead to "overlay" its contents.

Upvotes: 0

Views: 3123

Answers (1)

Digvijay
Digvijay

Reputation: 8957

I would recommend to use scale for this.

Try with these classes transform hover:scale-125

Upvotes: 1

Related Questions