4 Simple CSS Hover Transitions for your Elements Background

#webdev #css #html #beginners

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