css.png

Pure CSS Float On Hover Effect

A simple and fun css margin animation.

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>
  );
}

Published on August 23, 2021 (1 month ago) in

#css

Was this snippet helpful?


Written By Benjamin Carlson

Founder coffeeclass.io

More Articles By Benjamin Carlson


Legal

Terms

Disclaimer

Privacy Policy

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

Powered by

Vercel Logo