Image Hover Border Effect Using CSS

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.

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

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.
 

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>
Output:
CSS Hover Property
 
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>

Final Output Of Image Border Hover Effects Using CSS:

Image Hover Border Effect Using CSS

I hope you enjoyed reading this blog and discovered many new things, including how to use CSS to give an image a 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.
 

Video Output of Image Border Hover Effects:

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. 

 

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;}



Leave a Reply