Box hover in HTML & CSS
Box hover in HTML & CSS In this article, I am going to tell you how you can create a very beautiful Box hover in HTML & CSS with source code with simple steps. you just need to write a simple code of text to create this box with source code. we will use in this code HTML and simple internal CSS.
first of all, you have to create a folder, where you want to create a save you file of code and then drag it or open it on your text editor, after that you have to save this file by giving any name with the extension name HTML.
What is CSS
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
<!DOCTYPE html>
<html>
<head>
<title>Service box</title>
</head>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
width: 100vw;
height: 100vh;
background-color: #112339;
display: flex;
justify-content: center;
align-items: center;
}
.main
{
width: 400px;
height: 400px;
background-color: ##182c44;
border: 1px solid #304257;
border-radius: 10px;
overflow: hidden;
margin-left: 10px;
transition: 0.5s;
}
.img
{
width: 400px;
height: 300px;
transition: 0.5s;
overflow: hidden;
}
.img img
{
width: 100%;
height: 100%;
transition: 0.5s;
}
.main:hover img
{
transform: scale(1.2);
}
.cont
{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.cont ion-icon
{
color: #fff;
font-size: 40px;
}
.cont h2
{
font-family: arial;
margin-right: 100px;
color: #fff;
transition: 0.5s;
}
.cont h2:hover
{
color: #f3525a;
}
</style>
<body>
<div class="main">
<div class="img">
<img src="https://wp.w3layouts.com/excellence/wp-content/themes/excellence/assets/images/s1.jpg">
</div>
<div class="cont">
<ion-icon name="laptop-outline"></ion-icon>
<h2>Work Expertise &<br> Leadership</h2>
</div>
</div>
<div class="main">
<div class="img">
<img src="https://wp.w3layouts.com/excellence/wp-content/themes/excellence/assets/images/s4.jpg">
</div>
<div class="cont">
<ion-icon name="laptop-outline"></ion-icon>
<h2>Work Expertise &<br> Leadership</h2>
</div>
</div>
<div class="main">
<div class="img">
<img src="https://wp.w3layouts.com/excellence/wp-content/themes/excellence/assets/images/s3.jpg">
</div>
<div class="cont">
<ion-icon name="laptop-outline"></ion-icon>
<h2>Work Expertise &<br> Leadership</h2>
</div>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>
Here we completed our tutorial.
If you face any problem please feel free to contact us.
Thanks for reading our post.
Also Read:
Login Form in HTML and CSS || Creative Networks
Loading animation effect in HTML and CSS
Query Solved:
commerce website, create website for free, free hosting website, how to make ecommerce website in wordpress, how to make a website for free, movie download website, how to host a website, how to create a website in tamil, affiliate marketing website, html and css website design tutorial, facttechz website, html website design tutorial notepad++
