.png)
how to create image html and css || how to create image html || html and css image style || html || webpage design || design.
Html
1 . Open your notepad or other tools .
2 . Create new HTML file (example: index.html)
3 . Copy and paste this HTML code .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css Image Style</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
<img src="image.jpg">
</div>
<div class="box">
<img src="image.jpg">
</div>
<div class="box">
<img src="image.jpg">
</div>
<div class="box">
<img src="image.jpg">
</div>
<div class="box">
<img src="image.jpg">
</div>
</div>
</body>
</html>
5 . you add more than 5 image add this code in inside container class.
<div class="box">
<img src="image.jpg">
</div>
6 . ctrl+s Save this file . next create new file file name is (style.css).
7 . copy paste this code on style.css file
Css
.container{
width: 90%;
padding: 20px;
margin: 100px auto;
display: flex;
flex-direction: row;
justify-content: center;
}
.box{
width: 250px;
margin: 0 10px;
box-shadow: 0 0 20px 2px rgba(0,0,0,-1);
transition: 1s;
}
.box img{
display: block;
width: 100%;
border-radius: 20px;
}
.box:hover{
transform: scale(1.3);
z-index: 2;
}
background is empty do you want more attractive add background image.
8 . ctrl+s Save this style.css file.
9 . next open this html file on browser .
This is output : https://kutty-anonymous.github.io/image_style/
Github source images and code : https://github.com/kutty-anonymous/image_style.git
10 . or copy this combine code
1.create new index.html file. copy and paste all this code on index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css Image Style</title>
<style>
.container{
width: 90%;
padding: 20px;
margin: 100px auto;
display: flex;
flex-direction: row;
justify-content: center;
}
.box{
width: 250px;
margin: 0 10px;
box-shadow: 0 0 20px 2px rgba(0,0,0,-1);
transition: 1s;
}
.box img{
display: block;
width: 100%;
border-radius: 20px;
}
.box:hover{
transform: scale(1.3);
z-index: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="images/a.jpg">
</div>
<div class="box">
<img src="images/b.jpg">
</div>
<div class="box">
<img src="images/c.jpg">
</div>
<div class="box">
<img src="images/d.jpg">
</div>
<div class="box">
<img src="images/e.jpg">
</div>
</div>
</body>
</html>
Video File : https://youtu.be/HZKjjugXtjE
Code Explain : ~
Mata tags :
Meta tags are HTML elements that provide information about a web page. They are placed in the head section of an HTML document and do not display on the page itself. Here's an example of how a meta tag might be used in HTML.
More : Click Here
Title :
The title tag is an HTML element that specifies the title of a web page. It is placed in the head section of an HTML document and is displayed in the title bar of a web browser or as the page's title in search engine results
More : Click Here
Link :
The link tag is an HTML element used to link external resources such as stylesheets, fonts, icons, and other web pages. The link tag is placed in the head section of an HTML document and is used to specify the relationship between the current document and the linked resource.
Div :
The <div> tag is an HTML element that is used to create a container or a block-level box that can be used to group other HTML elements together. The <div> tag is a versatile element that is commonly used to divide a webpage into logical sections or to group related elements together.
Class :
In HTML, the class attribute is used to specify one or more classes for an HTML element. Classes are used to group elements together and apply CSS styles to them. By assigning the same class name to multiple elements, you can apply the same styles to all of them at once.
Width :
In HTML, the width attribute is used to specify the width of an element. The width attribute can be used with many HTML elements, such as tables, images, and iframes.
Padding :
In HTML, the padding property is used to specify the space between the content of an element and its border. The padding property can be used with many HTML elements, such as divs, headings, and paragraphs.
Margin :
In HTML, the margin property is used to specify the space between an element's border and the surrounding elements. The margin property can be used with many HTML elements, such as divs, headings, and paragraphs.
Display :
In HTML, the display property is used to specify how an element should be displayed on the web page. The display property can be used with many HTML elements, such as divs, headings, paragraphs, and images.
Flex-direction :
In CSS, the flex-direction property is used to define the direction in which flex items are placed inside a flex container. This property works only when applied to a flex container.
Justify-content :
In CSS, the justify-content property is used to align flex items along the main axis of a flex container. This property works only when applied to a flex container.
Box-shadow :
In CSS, the box-shadow property is used to add a shadow effect to an HTML element. The shadow can be applied to any rectangular element on the web page, such as a div, a button, or an image.
Transition :
In CSS, the transition property is used to define a transition effect between two states of an HTML element. This effect is used to make the change from one state to another smoother and more visually appealing.
Border-radius :
In CSS, the border-radius property is used to add rounded corners to an HTML element. The property specifies the radius of the rounded corners, and can be used to create a variety of shapes and effects.
Transform :
In CSS, the transform property is used to apply various transformations to an HTML element. These transformations can include rotating, scaling, skewing, and translating an element, among others
Z-index :
In CSS, the z-index property is used to specify the stacking order of HTML elements that overlap each other on a web page. The z-index property is an integer value that determines the relative depth of an element in the stacking order.
An element with a higher z-index value will appear above an element with a lower z-index value. Elements with the same z-index value are stacked in the order they appear in the HTML code.
more ideas follow on social medias.
.png)
.png)
