Telegram Group Join Now
Create Image Hover Border Effect Using CSS
.png "Create Image Hover Border Effect Using CSS")
Welcome to today’s tutorial. Today we are going to create an Image Hover Border Effect Using CSS. We will use HTML for inserting Images and Give Hover Border Effect Using CSS.
By the end of this blog after reading, you can make an Image Hover Border Effect. You can also create another hover effect with this hover effect. On hovering, it takes a Border around the Image. So let’s learn.
ADVERTISEMENT
Hey Learners,
Today we will learn how to create an Image Hover Border Effect. When we hover it, we can also use this property For Cards, Profile card or etc.
Live Preview:-
Before writing the code let’s see the live server of the Image Hover Border Effect so you can understand it perfectly.
| Code by | Himanshu Singh |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | No |
| Responsive | No |
HTML + CSS CODE:-
This is a very simple project. We are today going 2 code. We have used internal CSS means we have inserted all the CSS in the style tag within the head tag.
In the HTML we have simply inserted an img tag inside the body tag of the HTML. Here I have used the Unsplash website image as it is a website that gives us free non-copyright images.
50+ HTML, CSS & JavaScript Projects With Source Code
I have used the border-box property for giving the border to the image. When we hover over it.
In CSS I have also used the Flex property, which is also known as Flexbox property, the Flexbox property when applied to a container of items that contain items thus container on which flex box property is applied, the items will align in the same line horizontally Justify content aligns all the content center to the container vertically, while the align item aligns all the items in same in a vertical line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
img{
transition-duration: 0.4s;
border-radius: 25px;
}
img:hover{
border:8px solid rgb(240, 166, 166);
border-radius: 25px;
transition-duration: 0.4s;
}
</style>
</head>
<body>
<img src="https://media.istockphoto.com/photos/string-light-bulbs-at-sunset-picture-id1300384615?b=1&k=20&m=1300384615&s=170667a&w=0&h=rkDm5TdJp_dU7VAknk4EuZEZ2ho2QQspOavjlwGrsuI=" alt="">
</body>
</html>
Which code editor do you use for Image Hover Border Effect coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
No! this is not a responsive project
Do you use any external links to create this project?
No!
