Hero image can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and design the basic structure. The second section design the image and texts on the images. The hero image looks attractive when you are using it as a banner. Suppose you want to inform others about your newly added features then it will be the best procedure to proceed to use those features.
Creating Structure:
In this section, we will create the basic structure for the hero image cover picture. We will attach the image and put the text that will be placed on the image in the next section.
- HTML code: The HTML code is used to create a structure of hero image. Since it does not contain CSS so it is just a simple structure. We will use some CSS property to make it attractive.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Create a hero image</title>
</head>
<body>
<div class="container">
<img class="gfg"
src=
<div class="logo">
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>
<button>Hire with Us</button>
</div>
</div>
</body>
</html>
|
Designing the Structure:
In the previous section, we have created the structure of the basic web-page and now we are going to use the hero image with the title, tag, and a button. We will design the structure in this section.
- CSS code: CSS code is used to make an attractive website. This CSS property is used to make the hero image attractive and eye catching.
CSS
<style>
.gfg {
filter: blur(5px);
width: 100%;
}
.logo {
text-align:center;
position: absolute;
font-size: 18px;
top: 50px;
left: 27%;
color: white;
}
h1, p {
border: 4px solid white;
padding: 10px 50px;
position: relative;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
}
h1:hover {
background: -webkit-linear-gradient( green, lime);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logo button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer
}
.logo button:hover {
background-color: green;
color: white;
}
</style>
|
Combining the HTML and CSS Code: These examples combine both HTML and CSS code to design Hero image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Create a hero image</title>
<style>
/* blurring the image */
.gfg {
filter: blur(5px);
width: 100%;
}
/* designing title and tag line */
.logo {
text-align:center;
position: absolute;
font-size: 18px;
top: 50px;
left: 27%;
color: white;
}
h1, p {
border: 4px solid white;
padding: 10px 50px;
position: relative;
border-radius: 10px;
font-family: Arial, Helvetica, sans-serif;
}
h1:hover {
background: -webkit-linear-gradient( green, lime);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Designing button */
.logo button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer
}
.logo button:hover {
background-color: green;
color: white;
}
</style>
</head>
<body>
<div class="container">
<img class="gfg"
src=
<div class="logo">
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>
<button>Hire with Us</button>
</div>
</div>
</body>
</html>
|
Output:
