Image Hover Border Effect Css | Add A Border To Hover In CSS







Image Hover Border Effect Css | Add A Border To Hover In CSS

Welcome to today’s tutorial. Today we are going to create a coin flipper. For this, we are going to use HTML, CSS.

By the end of this blog after reading, you can make a Coin flipper. You can also make a card flipper. On hovering it take a flip. So let’s learn.

 Hey Learners, 

Today we will learn how to create a border to image. When we over it. We can also use this property when we over. Card, Profile card or etc.


Live Server:-

Before writing the code let’s see the live server of the countdown so you can understand it perfectly.

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.


CODE:-


This is a very simple project. We are today going 2 code. We have used internal CSS means we have inserted the all the CSS in the style tag within the head tag.

In the HTML we have simply inserted img tag inside the body tag of the HTML. Here I have used 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 on it.

In CSS I have also used the Flex property, which is also known as Flex box property, the Flex box 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 same line horizontally Justify content aligns all the content center to theContainer vertically, while the align item aligns  all the items in same in 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 learnt many 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 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.


You can follow me on Instagram.

Written by @Himanshu Singh. 
Share on:

Leave a Comment