4 Simple CSS Hover Transitions for your Elements Background

This video will show you 4 different ways you can perform a CSS background transition on a clickable element. CSS transitions are useful, especially because often mobile and tablet devices no longer have a clickable title or button eg. readme. Instead, the whole element is clickable.

Being able to have nice CSS hover effects allows users on desktop to know the elements are clickable. There are many different ways you can approach this using CSS and transitions.

We will take a look at:

• Background color changes
• Using transition
• Using special CSS elements like :before
• Applying different transitions effects like:
• Using absolute values to have a top-down transition
• Using border-radius to create a circular transition
• Using border-width to create angled transition

Background Transition 1

Just changing the background with a smooth transition

.v1 {
  transition: 0.25s ease background;
  &:hover {
    background:#e1e1e1;
  }
}

Background Transition 2

Sliding the overlay from the top to the bottom

.v2 {
  position: relative;
  overflow: hidden;
  h2,.img,p {
    position: relative;
  }
  &:before {
    content:"";
    display: block;
    position: absolute;
    top:0;
    left:0;right:0;
    bottom:100%;
    background:#e1e1e1;
    transition: 0.25s ease bottom;
  }
  &:hover {
    &:before {
      bottom:0%;
    }
  }
}

Background Transition 3

Creating a circle that expands from the middle

.v3 {
    position: relative;
    overflow: hidden;
    h2,.img,p {
        position: relative;
    }
    &:before {
        content:"";
        display: block;
        position: absolute;
        top:50%;
        left:50%;
        border-radius:50%;
        width:0%;
        padding-top:0%;
        transform: translate(-50%,-50%);
        background:#e1e1e1;
        transition: 0.5s ease padding-top, 0.5s ease width;
    }
    &:hover {
        &:before {
            width:150%;
            padding-top:150%;
        }
    }
}

Background Transition 4

Creating an angle that comes from the top right to the bottom left

.v4 {
    position: relative;
    overflow: hidden;
    h2,.img,p {
        position: relative;
    }
    &:before {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        width:0px;
        height:0px;
        border-style:solid;
        border-width:0px 0px 0 0;
        border-color:#e1e1e1 transparent transparent transparent;
          transition: 0.5s ease border-width;
    }
    &:hover {
        &:before {
            border-width:800px 800px 0 0;
        }
    }
}

Want to see more:

I will try to post new great content every day. Here are the latest items:

• Designing a Full Website UI using Figma
• Why you should Whiteboard your Design & Development, UI & UX
• How to start using Styled Components for React Native
• Creating a Mobile Design and Developing it

Comments

[David Sanchez]

Awesome transitions!

[Adrian Twarog]

Thanks, will be doing box-shadow transitions today, stay tuned!

[Yarmaa]

Wow thank you very much :)

[Adrian Twarog]

Thanks, going to actually be making slightly more complex transitions each day this week to build on the previous, so stay tuned.

[Berns Fire Death]

These are sick, cheers mate.

[Adrian Twarog]

Thanks, hoping to build a collection of videos to show the fundamentals of CSS properties and build better and better designs and transitions.

[Gabriel]

One way I like to create the slide effect is by using box-shadow: inset.