Hello Coder! Welcome to the Codewithrandom Blog. 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.
It is known as a CSS hover effect when a user places the cursor over an element, which causes the element's property to change.
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.
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 cards or etc.
Before writing the code let's see the live server of the Image Hover Border Effect so you can understand it perfectly.
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.
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 aligned 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>
We utilised internal CSS for this assignment. When working on small projects like this one, the internal CSS technique is useful because it allows us to specify the style of the elements within the head section of the html files. Using the tag selector, we will now add styling to our picture after we have recently added an image to our project.
<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>
I hope you enjoyed reading this blog and discovered many new things, including how to use CSS to give an Image Hover Border Effect. If you enjoyed it, kindly leave a remark so that we know. This will encourage us to write more blogs in the future.
If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.
Written by Himanshu Singh.
Top comments (0)