Gradient Image Border Using Html & Css
How to Create Gradient Border Around the image when hover using HTML And CSS | Html & Css का उपयोग करके फोटो के चारों तरफ Gradient Border कैसे बनाए ।
Preview:
Click to Watch: Gradient Image Border Using Html & Css
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Gradient Border</title>
</head>
<body>
<img src="Image\User-image.jpg">
</body>
</html>
CSS:
body {
background-color: #000;
}
img {
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;
}
img:hover {
background-position: 0% 0%;
}
Comments
Post a Comment