Simple Hero with Background Image HTML and CSS

A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be used in versatile ways. Home pages and landing pages are the most frequent use cases but they also work well with single post, archive, contact, and other pages.

HTML Code:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <!-- Start Content Box -->
      <div class="content-box-6">
        <div class="content-box-6-bg-blur"></div>
        <div class="content-box-6-bg"></div>
        <div class="content-box-6-content-wrapper">
          <h3 class="content-box-6-title">Are you ready to start your project now?</h3>
          <div class="content-box-6-content">Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing.</div>
          <a class="content-box-6-button" href="#">Read More</a>
        </div>
      </div>
      <!-- End Content Box -->
    </div>
  </div>
</div>

CSS Code:

.container{
  margin-left: 10%;
  margin-right: 10%;
}
.content-box-6 {
  background: #ffffff;
  padding: 60px 40px;
  text-align: center;
  position: relative;
  border-radius: 25px;
  margin-bottom: 30px;
  transition: 0.3s;
}
.content-box-6-bg-blur {
  background: url('https://images.pexels.com/photos/11929616/pexels-photo-11929616.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1') center center / cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform: scale(0.95) translateY(20px);
  filter: blur(30px);
}
.content-box-6-bg {
  background: url('https://images.pexels.com/photos/11929616/pexels-photo-11929616.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1') center center / cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.content-box-6-content-wrapper {
  letter-spacing: 1px;
  position: relative;
}
.content-box-6-title {
  font-size: 32px;
  margin: 0 0 25px;
  color: #fff;
  text-shadow: 0 4px 20px #00000059;
}
.content-box-6-content {
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
}
.content-box-6-button {
  display: inline-block;
  margin-top: 26px;
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
  background: #ff3eb0;
  padding: 10px 30px;
  border-radius: 50px;
  transition: 0.3s;
}
.content-box-6-button:hover {
  background: #ff157f;
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply