Image Hover Border Effect Using CSS
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 a hover border effect using CSS.
.png "Image 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.
Before we start with the project lets understand some of the related content to hoverproperty.
What is the CSS Hover Effect?
A website’s user experience can be made more dynamic and user-friendly by using the CSS hover property, which offers a minor animation effect.
By the end of this blog, after reading it, you can make an image hover border effect. You can also create another hover effect with this one. On hovering, it takes a border around the image. So let’s learn.
50+ HTML, CSS and JavaScript Projects With Source Code
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.
Live Preview Of Image Border Hover Effects:-
Before writing the code let’s see the live server of the Image Hover Border Effect so you can understand it perfectly.
HTML + CSS CODE For Image Border Hover Effects:-
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 to give the border to the image. when we hover over it.
100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
In CSS, I have also used the Flex property, which is also known as the Flexbox property. When the Flexbox property is applied to a container of items that contain items, 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 the same 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>
<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>Final Output Of Image Border Hover Effects Using CSS:
Video Output of Image Border Hover Effects:
FAQ on Image Hover Border Effect?
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.
What is CSS Hover Effect?
An element in CSS responds with transition effects when a user lingers over it. It’s used to draw attention to the website’s most important features and genuinely enhance user experience.
A website’s user experience can be made more dynamic and user-friendly by using the CSS hover property, which offers a minor animation effect.
How many types of hover effects are there in CSS?
1. Overlay.
2. Zoom
3. Shadow.
4. Background.
5. Border.
What is the syntax of CSS image hover property?
img:hover{
border:8px solid rgb(240, 166, 166);
border-radius: 25px;
transition-duration: 0.4s;}
