Gradient Image Border Using CSS

Create Gradient Border Around the image when hover using HTML And CSS

HTML:

<img src="images/user-1.png" class="user-pic">

CSS:

body{
    background: #000;
}
.user-pic{
    width: 150px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 8px;
    background: linear-gradient(135deg, red, blue 50%, transparent 50%);
    background-size: 250%;
    background-position: 100% 100%;
    transition: background 0.5s;
}
.user-pic:hover{
    background-position: 0% 0%;
}

Download the user image 👉 user-1.png