DEV Community

loading...
Cover image for 4 Simple CSS Hover Transitions for your Elements Background

4 Simple CSS Hover Transitions for your Elements Background

adriantwarog profile image Adrian Twarog ・2 min read

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:

Discussion (6)

pic
Editor guide
Collapse
yarmaa profile image
Yarmaa

Wow thank you very much :)

Collapse
adriantwarog profile image
Adrian Twarog Author

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

Collapse
sanchezdav profile image
David Sanchez

Awesome transitions!

Collapse
adriantwarog profile image
Adrian Twarog Author

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

Collapse
berns_churches profile image
Berns Fire Death

These are sick, cheers mate.

Collapse
adriantwarog profile image
Adrian Twarog Author

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