Create Image Hover Border Effect Using CSS

Create Image Hover Border Effect Using CSS

 Image Hover Border Effect Using CSS
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.

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.

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>
I hope you have loved this blog and learned How to Give Image Hover Border Effect Using CSS and many more things at a place please let us know your review in the comment section if you liked it please comment below as it will give us the motivation to create more blogs.
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. 

Leave a Reply