Pure CSS Float On Hover Effect

Pure CSS Float On Hover Effect

4 min read · 744 words · Shared August 23, 2021 by

Article Summary: Add a float up hover transition animation to a div using css.

Demo

In this step by step snippet, you will learn how to add a simple css hover animation to a HTML element to create the following effect:

Hover Me

To Float Up

Code

<div class="flex-wrapper">
  <div class="tag">
    <p>Hover Me</p>
  </div>
  <div class="tag">
    <p>To Float Up</p>
  </div>
</div>

<style>
  .flex-wrapper {
    display: flex;
    height: 5px;
  }

  .tag {
    margin-right: 2px;
    transition: margin 0.2s ease-in-out;
    background-color: gray;
  }

  .tag:hover {
    margin-top: -2;
  }
</style>

Steps + Explanation

1

Add The HTML Markup

The basic HTML markup with class names.

<div class="flex-wrapper">
  <div class="tag">
    <p>Hover Me</p>
  </div>
  <div class="tag">
    <p>To Float Up</p>
  </div>
</div>
2

Define The Wrapper CSS

We will make the wrapper flex and set the height to 5px. The height can be whatever height you want.

<style>
  .flex-wrapper {
    display: flex;
    height: 5px;
  }
</style>
3

Define The Tag CSS

Both of these styles are optional and subjective.

<style>
  .tag {
    margin-right: 2px;
    background-color: gray;
  }
</style>
4

Create The Hover State

When the user hovers over the tag, the margin will be changed to "-2". If you try this code out, you will notice that the tag will jump up, rather than float nicely.

<style>
  .tag:hover {
    margin-top: -2;
  }
</style>
5

Add The CSS Transition

We can use a transition to make the tag float nicely. This transition is added to the tag class.

<style>
  .tag {
    margin-right: 2px;
    transition: margin 0.2s ease-in-out; // Add the transition
    background-color: gray;
  }
</style>

Going Further

Let's take a further look at some of the code bits.

css Transition

Definition

How We Use Transition

In our case, our transition looks like

transition: margin 0.2s ease-in-out;

Breaking this down further, we have:

  • margin - the property we are changing
  • .2s - the time it takes for the transition to complete
  • ease-in-out - the easing function

ease-in-out

Definition

Common Mistakes

Here are some common mistakes and how to avoid them.

  • not having a defined height

If you don't have a defined height, the tag layout will shift if you hover quickly between the tags. This is because the tag you are hovering over will grow larger causing the wraper to also grow and create a layout shift.

Hover Me

To Float Up

This is the exact same code as above except we have no defined height.

.flex-wrapper {
  display: flex;
  // height: 5px; // <-- this line is removed
}
  • adding transition to the wrong element

Be sure you are adding transition to each tag and not the wrapper.

React Example

Here is the react code with inline styles.

import React from 'react'

export default function make-div-float-up-hover-css() {
    return (
        <div style={{border: '2px dotted', borderColor: 'gray', padding: '10px 0', marginTop: '4px'}}>
            <div style={{display: 'flex', margin: '4px 0', justifyContent: 'center', height: 5}}>
                <div style={{marginRight: 2, transition: 'margin .2s ease-in-out'}} _hover={{marginTop: 2}}>
                    <p>Hover Me</p>
                </div>
                <div style={{marginRight: 2, transition: 'margin .2s ease-in-out'}} _hover={{marginTop: 2}}>
                    <p>To Float Up</p>
                </div>
            </div>
        </div>
    )
}

Chakra UI Example

import { Flex, Tag, Text, Box, useColorModeValue } from "@chakra-ui/react";

export default function FloatUpDivAnimation() {
  return (
    <Box
      border="2px dotted"
      borderColor={useColorModeValue("gray.300", "gray.100")}
      py={10}
      mt={4}
    >
      <Flex my={4} justifyContent="center" h={5}>
        <Tag
          mr={2}
          size="lg"
          transition="margin .2s ease-in-out"
          _hover={{ mt: "-2" }}
        >
          <Text>Hover Me</Text>
        </Tag>
        <Tag
          mr={2}
          size="lg"
          transition="margin .2s ease-in-out"
          _hover={{ mt: "-2" }}
        >
          <Text>To Float Up</Text>
        </Tag>
      </Flex>
    </Box>
  );
}

Edit on GitHub

Related Tags

    #css

On This Page

Demo

Code

Steps + Explanation

Add The HTML Markup

Define The Wrapper CSS

Define The Tag CSS

Create The Hover State

Add The CSS Transition

Going Further

css Transition

Definition

How We Use Transition

ease-in-out

Definition

Common Mistakes

React Example

Chakra UI Example

No related posts! Like css? Try writing about it.


Loading author data...

    Legal

    Terms

    Disclaimer

    Privacy Policy


    Carlson Technologies Logo© Copyright 2021 - 2024, Carlson Technologies LLC. All Rights Reserved.