A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The hero image looks attractive when you are using it as a banner.
Preview:
Approach:
- Create a container with a blurred background image using the `.gfg` class.
- Style the title, tagline, and button in the `.logo` class with border, padding, and positioning.
- Add a hover effect to the title for a gradient background.
- Design the button with background and text color, and a hover effect for interactivity.
Example: In this example we will design the Hero Image using HTML and CSS.
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">
<!-- background image -->
<img class="gfg" src=
<!-- title and tag line with button -->
<div class="logo">
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>
<button>Hire with Us</button>
</div>
</div>
</body>
</html>
|
Output: