Image Hotspot Templates 11-20

<div class="imh-6310-custom-temp-11">
  <div class="imh-6310-custom-temp-11-icon">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo11">
  </div>
  <div class="imh-6310-custom-temp-11-content">
    <div class="imh-6310-custom-temp-11-title">Car Wheel</div>
    <div class="imh-6310-custom-temp-11-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.</div>
    <div class="imh-6310-custom-temp-11-read-more">
      <a href="#">Read more</a>
    </div>
  </div>
</div>

.imh-6310-custom-temp-11 {
    width: 350px;
    font-family: sans-serif;
    position: relative;
    z-index: 1;
  }
  .imh-6310-custom-temp-11 .imh-6310-custom-temp-11-icon {
    color: #fff;
    background: #eb3b5a;
    font-size: 55px;
    text-align: center;
    line-height: 128px;
    width: 140px;
    height: 140px;
    margin: 0 auto 30px;
    border: 5px solid #eb3b5a;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .imh-6310-custom-temp-11-icon img {
    width: 130px;
    height: 130px;
  }
  .imh-6310-custom-temp-11 .imh-6310-custom-temp-11-icon:before {
    content: "";
    background: #eb3b5a;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    opacity: 1;
    position: absolute;
    bottom: -33px;
    right: 0;
    left: 0;
    z-index: -1;
    -webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);
    clip-path: polygon(100% 0, 0 0, 50% 100%);
  }
  .imh-6310-custom-temp-11 .imh-6310-custom-temp-11-content {
    text-align: center;
    border-radius: 20px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    background: #FFA37A;
  }
  .imh-6310-custom-temp-11 .imh-6310-custom-temp-11-content:after {
    content: '';
    background: #eb3b5a;
    width: 100%;
    height: 20px;
    display: block;
    bottom: 0;
    position: absolute;
  }
  .imh-6310-custom-temp-11 .imh-6310-custom-temp-11-title {
    color: #fff;
    background: #eb3b5a;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 5px;
    margin: 0 0 10px;
  }
  .imh-6310-custom-temp-11 .imh-6310-custom-temp-11-description {
    color: rgb(0, 0, 0);
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 25px;
    padding: 0 15px;
    margin-bottom: 10px;
  }
  .imh-6310-custom-temp-11-read-more{
    float: left;
    width: 100%;
    margin-top: 10px !important;
    margin-bottom: 30px !important;
    text-align: center;
  }
  
  .imh-6310-custom-temp-11-read-more a {
    text-decoration: none;
    font-size: 14px;
    color: white;
    width: 150px;
    border: 1px solid #000;
    padding: 5px 15px;
    background: #ef4444;
  }
  
  .imh-6310-custom-temp-11-read-more a:hover {
    background: #a10f28;
  }
  @media only screen and (max-width:990px) {
    .imh-6310-custom-temp-11 {
      margin: 0 0 30px;
    }
  }

<div class="imh-6310-custom-temp-12">
  <div class="imh-6310-custom-temp-12-icon">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/park.png" alt="demo12">
  </div>
  <div class="imh-6310-custom-temp-12-content">
    <div class="imh-6310-custom-temp-12-title">Parking Spot</div>
    <div class="imh-6310-custom-temp-12-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.</div>
    <div class="imh-6310-custom-temp-12-read-more">
      <a href="#">Read more</a>
    </div>
  </div>
</div>

.imh-6310-custom-temp-12 {
    width: 350px;
    font-family: sans-serif;
    text-align: center;
  }
  .imh-6310-custom-temp-12 .imh-6310-custom-temp-12-icon {
    color: #fff;
    background: linear-gradient(135deg, #FF87D0, #F6449A);
    font-size: 50px;
    line-height: 100px;
    height: 100px;
    width: 100px;
    margin: 0 auto 25px;
    border-radius: 15px;
    box-shadow: 0 0 0 5px #fff, 0 0 12px rgba(0, 0, 0, 0.5);
    transform: translateY(8px);
  }
  .imh-6310-custom-temp-12-icon img {
    width: 100%;
    border-radius: 15px;
    float: left;
  
  }
  .imh-6310-custom-temp-12 .imh-6310-custom-temp-12-content {
    background: linear-gradient(to top, #ef4a9b, #ffe0f2);
    padding: 10px 13px 15px;
    border-radius: 10px;
    box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.5);
    float: left;
    width: 100%;
  }
  .imh-6310-custom-temp-12-title {
    color: #fff;
    background: linear-gradient(135deg, #FF87D0, #F6449A);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 15px;
    margin: -21px 7px 15px;
    border-radius: 0 0 25px 25px;
    position: relative;
    z-index: 1;
  }
  .imh-6310-custom-temp-12-title:before,
  .imh-6310-custom-temp-12-title:after {
    content: "";
    background: linear-gradient(-45deg, #9F2685 49%, transparent 50%);
    width: 12px;
    height: 10px;
    position: absolute;
    top: 1px;
    left: -12px;
  }
  .imh-6310-custom-temp-12-title:after {
    transform: rotateY(180deg);
    left: auto;
    right: -12px;
  }
  .imh-6310-custom-temp-12-description {
    color: rgb(0, 0, 0);
    font-size: 15px;
    line-height: 25px;
    margin: 0;
  }
  .imh-6310-custom-temp-12-read-more{
    float: left;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    }
    
    .imh-6310-custom-temp-12-read-more a {
    text-decoration: none;
    font-size: 14px;
    color: white;
    width: 150px;
    border: 1px solid;
    padding: 5px 15px;
    background: #3f51b5;
    }
    
    .imh-6310-custom-temp-12-read-more a:hover {
    background: #6779db;
    }
  @media only screen and (max-width:990px) {
    .imh-6310-custom-temp-12 {
      margin: 0 0 40px;
    }
  }

<div class="imh-6310-custom-temp-13">
  <div class="imh-6310-custom-temp-13-icon">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo13">
  </div>
  <div class="imh-6310-custom-temp-13-title">Car</div>
  <div class="imh-6310-custom-temp-13-description">Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Qui quaerat
    fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.</div>
  <div class="imh-6310-custom-temp-13-read-more">
    <a href="#">Read more</a>
  </div>
</div>

.imh-6310-custom-temp-13{
    width: 350px;
    float: left;
    color: #fff;
    background: #4283A9;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    padding: 0 0 55px;
    margin: 0 auto;
    position: relative;
  }
  .imh-6310-custom-temp-13:after{
    content: "";
    background: #fff;
    width: 15px;
    height:15px;
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    bottom: 18px;
    left: 50%;
  }
  .imh-6310-custom-temp-13 .imh-6310-custom-temp-13-icon{
    background: #1E5B88;
    padding: 20px 0;
    margin: 0 0 30px;
    border-bottom: 5px solid #fff;
    position: relative;
  }
  .imh-6310-custom-temp-13-icon img{
    width: 110px;
    border: 4px white;
    border-style: double;
  }
  .imh-6310-custom-temp-13 .imh-6310-custom-temp-13-icon:before,
  .imh-6310-custom-temp-13 .imh-6310-custom-temp-13-icon:after{
    content: "";
    background: linear-gradient(to top left, #fff 49%, transparent 50%);
    width: 30px;
    height: 30px;
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    bottom: -20px;
    left: 50%;
  }
  .imh-6310-custom-temp-13 .imh-6310-custom-temp-13-title{
    font-family: 'Oswald', sans-serif;
    font-size: 23px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 15px 15px;
  }
  .imh-6310-custom-temp-13 .imh-6310-custom-temp-13-description{
    font-size: 13px;
    letter-spacing: 0.5px;
    margin: 0 15px;
  }
  .imh-6310-custom-temp-13-read-more{
    float: left;
    width: 100%;
    margin-top: 20px;
    text-align: center;
  }
  
  .imh-6310-custom-temp-13-read-more a {
    text-decoration: none;
    font-size: 14px;
    color: white;
    width: 150px;
    border: 1px solid;
    padding: 5px 15px;
    background: #18c7a9;
  }
  
  .imh-6310-custom-temp-13-read-more a:hover {
    background: #259783;
  }
  
  @media only screen and (max-width: 990px){
    .imh-6310-custom-temp-13{ margin: 0 0 30px; }
  }

<div class="imh-6310-custom-temp-14">
  <div class="imh-6310-custom-temp-14-icon">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/park.png" alt="demo14">
  </div>
  <div class="imh-6310-custom-temp-14-ititle">Parking Zone</div>
  <div class="imh-6310-custom-temp-14-idescription">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.</div>
  <div class="imh-6310-custom-temp-14-read-more">
    <a href="#">Read more</a>
  </div>
</div>

.imh-6310-custom-temp-14 {
    width: 350px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    background: linear-gradient(to top, #f8563a, #ffffff);
    font-family: 'Roboto', sans-serif;
    padding: 15px;
    float: left;
}

.imh-6310-custom-temp-14 .imh-6310-custom-temp-14-icon {
    color: #fff;
    background: linear-gradient(to bottom, #ff6348, #dd270b);
    font-size: 60px;
    text-align: center;
    line-height: 120px;
    width: 120px;
    height: 120px;
    margin: 0 0 25px;
    border-radius: 10px 10px 10px 5px;
    position: relative;
}

.imh-6310-custom-temp-14-icon img {
    width: 100%;
    border-radius: 10px 10px 10px 5px;
    border: 3px solid #dd270b;
    display: block;
    float: left;

}

.imh-6310-custom-temp-14 .imh-6310-custom-temp-14-icon:after {
    content: '';
    position: absolute;
    left: 5px;
    bottom: -10px;
    z-index: 1;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f8563b;
}

.imh-6310-custom-temp-14 .imh-6310-custom-temp-14-ititle {
    color: #000000;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.imh-6310-custom-temp-14 .imh-6310-custom-temp-14-idescription {
    color: rgb(0, 0, 0);
    font-size: 15px;
    line-height: 25px;
    margin: 0 0 15px;
    display: block;
}

.imh-6310-custom-temp-14-read-more {
    float: left;
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

.imh-6310-custom-temp-14-read-more a {
    text-decoration: none;
    font-size: 14px;
    color: white;
    width: 150px;
    border: 1px solid;
    padding: 5px 15px;
    background: #c71d00;
}

.imh-6310-custom-temp-14-read-more a:hover {
    background: #df3f24;
}

@media only screen and (max-width:990px) {
    .imh-6310-custom-temp-14 {
        margin: 0 0 40px;
    }
}

<div class="imh-6310-custom-temp-15">
  <div class="imh-6310-custom-temp-15-icon">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo15">
  </div>
  <div class="imh-6310-custom-temp-15-title">car</div>
  <div class="imh-6310-custom-temp-15-description">Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.</div>
  <div class="imh-6310-custom-temp-15-read-more">
    <a href="#">Read more</a>
  </div>
</div>

.imh-6310-custom-temp-15 {
  width: 350px;
  float: left;
  color: #005859;
  font-family: 'Bitter', serif;
  background: #c2f5f5;
  padding: 15px;
}
.imh-6310-custom-temp-15 .imh-6310-custom-temp-15-icon {
  color: #04babf;
  font-size: 50px;
  text-align: center;
  width: 130px;
  height: 130px;
  margin: 0 auto 25px;
  border: 3px solid #06BBBD;
  border-radius: 20px 20px;
  position: relative;
}
.imh-6310-custom-temp-15 .imh-6310-custom-temp-15-icon:before,
.imh-6310-custom-temp-15 .imh-6310-custom-temp-15-icon:after {
  content: "";
  width: 60px;
  height: 60px;
  border-top: 8px solid #06BBBD;
  border-right: 8px solid #06BBBD;
  border-radius: 0 20px 0 0;
  position: absolute;
  top: -6px;
  right: -6px;
}
.imh-6310-custom-temp-15 .imh-6310-custom-temp-15-icon:after {
  transform: rotate(180deg);
  top: auto;
  bottom: -6px;
  right: auto;
  left: -6px;
}
.imh-6310-custom-temp-15 .imh-6310-custom-temp-15-title {
  color: #06BBBD;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  margin: 0 0 5px;
}
.imh-6310-custom-temp-15 .imh-6310-custom-temp-15-description {
  font-size: 14px;
  letter-spacing: 0.5px;
  line-height: 23px;
  margin: 0;
}
.imh-6310-custom-temp-15.red .imh-6310-custom-temp-15-icon {
  color: #F9635C;
  border-color: #F9635C;
}
.imh-6310-custom-temp-15-icon img {
  width: 100%;
  border-radius: 20px 20px;
}
.imh-6310-custom-temp-15-read-more{
  float: left;
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

.imh-6310-custom-temp-15-read-more a {
  text-decoration: none;
  font-size: 14px;
  color: white;
  width: 150px;
  border: 1px solid;
  padding: 5px 15px;
  background: #18c7a9;
}

.imh-6310-custom-temp-15-read-more a:hover {
  background: #259783;
}
@media only screen and (max-width:990px) {
  .imh-6310-custom-temp-15 {
    margin: 0 0 30px;
  }
}

<div class="imh-6310-custom-temp-16">
  <div class="imh-6310-custom-temp-16-content">
    <div class="imh-6310-custom-temp-16-title">Skoda Kushaq</div>
    <div class="imh-6310-custom-temp-16-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.</div>
    <div class="imh-6310-custom-temp-16-read-more">
      <a href="#">Read more</a>
    </div>
    <div class="imh-6310-custom-temp-16-icon">
      <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="">
    </div>
  </div>
</div>

.imh-6310-custom-temp-16{
  width: 350px;
  color: #fff;
  font-family: 'Hind', sans-serif;
  text-align: center;
  padding: 25px 5px 30px 0;
  box-shadow: 15px 0 15px -15px rgba(0, 0, 0, 0.5) inset;
  position: relative;
}
.imh-6310-custom-temp-16:after{
  content: "";
  width: 20px;
  height: 20px;
  box-shadow: 20px 0 20px -20px rgba(0, 0, 0, 0.5) inset;
  position: absolute;
  bottom: 10px;
  left: 0;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.imh-6310-custom-temp-16 .imh-6310-custom-temp-16-content{
  background: linear-gradient(to left bottom,#FD9743,#FF018F);
  padding: 15px;
  border-radius:0 30px 30px 0;
  box-shadow: 20px 0 20px -20px rgba(0, 0, 0, 0.5) inset;
}
.imh-6310-custom-temp-16 .imh-6310-custom-temp-16-title{
  color: #FF018F;
  background: #fff;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 15px 10px;
  margin: 0 -20px 20px -15px;
  border-radius: 0 30px 30px 0;
  box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.5) inset, 5px 0 5px rgba(0,0,0,0.2);
}
.imh-6310-custom-temp-16 .imh-6310-custom-temp-16-description{
  font-size: 15px;
  line-height: 24px;
  margin: 0 0 20px;
}
.imh-6310-custom-temp-16 .imh-6310-custom-temp-16-imh-6310-custom-temp-13-icon{
  color: #fff;
  font-size: 45px;
}
.imh-6310-custom-temp-16-icon img{
  width: 110px;
}
.imh-6310-custom-temp-16-read-more{
  float: left;
  width: 100%;
  margin-top: 20px;

  margin-bottom: 10px;
  text-align: center;
}

.imh-6310-custom-temp-16-read-more a {
  text-decoration: none;
  font-size: 14px;
  color: white;
  width: 150px;
  border: 1px solid;
  padding: 5px 15px;
  background: #18c7a9;
}

.imh-6310-custom-temp-16-read-more a:hover {
  background: #259783;
}
@media only screen and (max-width:990px){
  .imh-6310-custom-temp-16{ margin: 0 0 30px; }
}

<div class="imh-6310-custom-temp-17">
    <div class="imh-6310-custom-temp-17-content">
        <div class="imh-6310-custom-temp-17-title">Hotel</div>
        <div class="imh-6310-custom-temp-17-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
            adipisci porro minima iure amet sunt, inventore hic modi, iste voluptas debitis dicta. Facere consequuntur
            illum eius obcaecati. Quidem, incidunt accusantium.</div>
        <div class="imh-6310-custom-temp-17-read-more">
            <a href="#">Read more</a>
        </div>
        <div class="imh-6310-custom-temp-17-icon">
            <img src="https://wpmart.org/wp-content/uploads/2022/10/fast_food.png" alt="demo17">
        </div>
    </div>
</div>

.imh-6310-custom-temp-17 {
  width: 350px;
  font-family: 'PT Sans', sans-serif;
  color: #fff;
  text-align: center;
  box-shadow: 0 6px 6px -7px #000 inset;
  position: relative;
}
.imh-6310-custom-temp-17 .imh-6310-custom-temp-17-content {
  background: linear-gradient(to right, #EE3226 49%, #BF281F 50%);
  width: 83%;
  height: 100%;
  margin: 0 auto;
  padding: 30px 5px;
  box-shadow: 0 5px 5px -5px #000 inset;
  position: relative;
  -webkit-clip-path: polygon(50% 100%, 100% 85%, 100% 0, 0 0, 0 85%);
  clip-path: polygon(50% 100%, 100% 85%, 100% 0, 0 0, 0 85%);
  transition: all 0.3s ease 0s;
}
.imh-6310-custom-temp-17:hover .imh-6310-custom-temp-17-content {
  background: linear-gradient(to right, #BF281F 49%, #EE3226 50%);
}
.imh-6310-custom-temp-17-title {
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 1px;
  margin: 0 0 8px 0;
}
.imh-6310-custom-temp-17-description {
  font-size: 14px;
  font-weight: 700;
  display: block;
  font-family: sans-serif;
}
.imh-6310-custom-temp-17 .imh-6310-custom-temp-17-icon {
  color: #fff;
  font-size: 40px;
  transition: all 0.3s;
}
.imh-6310-custom-temp-17-icon img {
  width: 100px;
}
.imh-6310-custom-temp-17-read-more{
  float: left;
  width: 100%;
  margin-top: 20px;

  margin-bottom: 10px;
  text-align: center;
}

.imh-6310-custom-temp-17-read-more a {
  text-decoration: none;
  font-size: 14px;
  color: white;
  width: 150px;
  border: 1px solid;
  padding: 5px 15px;
  background: #18c7a9;
}

.imh-6310-custom-temp-17-read-more a:hover {
  background: #259783;
}
@media screen and (max-width:990px) {
  .imh-6310-custom-temp-17 {
    margin-bottom: 30px;
  }
}

<div class="imh-6310-custom-temp-18">
  <div class="imh-6310-custom-temp-18-icon">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/park.png" alt="demo18">
  </div>
  <div class="imh-6310-custom-temp-18-wrapper">
    <div class="imh-6310-custom-temp-18-title">Parking</div>
    <div class="imh-6310-custom-temp-18-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor adipisci porro minima iure amet sunt, inventore hic modi, iste voluptas debitis dicta. Facere consequuntur illum eius obcaecati. Quidem, incidunt accusantium.</div>
    <div class="imh-6310-custom-temp-18-read-more">
      <a href="#">Read more</a>
    </div>
  </div>
</div>

.imh-6310-custom-temp-18 {
  width: 350px;
  background: #c9c9c9;
  text-align: center;
  padding: 100px 0 30px;
  margin-top: 30px;
  position: relative;
}
.imh-6310-custom-temp-18-wrapper {
  float: left;
  width: 100%;
  background: #c9c9c9;
  padding: 8px;
}
.imh-6310-custom-temp-18 .imh-6310-custom-temp-18-icon {
  width: 150px;
  height: 100px;
  line-height: 100px;
  background: #ee5160;
  margin: 0 auto;
  box-shadow: 0 8px 6px -6px #4d485e;
  text-shadow: 1px 1px 0 #4d485e, 2px 2px 0 #4d485e, 3px 3px 0 #4d485e, 4px 4px 0 #4d485e;
  font-size: 50px;
  color: #fff;
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
}
.imh-6310-custom-temp-18-icon img {
  width: 100px;
  padding: 8px;
  display: block;
  text-align: center;
  margin: 0 auto;
}
.imh-6310-custom-temp-18 .imh-6310-custom-temp-18-icon:before,
.imh-6310-custom-temp-18 .imh-6310-custom-temp-18-icon:after {
  content: "";
  border-right: 20px solid #9c434c;
  border-left: 20px solid transparent;
  border-top: 20px solid transparent;
  position: absolute;
  top: 0;
  left: -40px;
}
.imh-6310-custom-temp-18 .imh-6310-custom-temp-18-icon:after {
  border-right: 20px solid transparent;
  border-left: 20px solid #9c434c;
  left: auto;
  right: -40px;
}
.imh-6310-custom-temp-18 .imh-6310-custom-temp-18-title {
  font-size: 25px;
  font-weight: 600;
  color: #033a34;
  text-transform: uppercase;
  margin: 0;
}
.imh-6310-custom-temp-18-description {
  font-size: 18px;
  line-height: 25px;
  font-family: sans-serif;
  color: #033a34;
}
.imh-6310-custom-temp-18-read-more{
  float: left;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.imh-6310-custom-temp-18-read-more a {
  text-decoration: none;
  font-size: 14px;
  color: white;
  width: 150px;
  border: 1px solid;
  padding: 5px 15px;
  background: #18c7a9;
}
.imh-6310-custom-temp-18-read-more a:hover {
  background: #259783;
}
@media only screen and (max-width: 990px) {
  .imh-6310-custom-temp-18 {
    margin-top: 40px;
  }
}

<div class="imh-6310-custom-temp-19">
  <div class="imh-6310-custom-temp-19-icon">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo19">
  </div>
  <div class="imh-6310-custom-temp-19-content">
    <div class="imh-6310-custom-temp-19-title">Car Wheel</div>
    <div class="imh-6310-custom-temp-19-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, quod. Corporis aliquam rem omnis, totam veniam temporibus minima optio voluptatum iure, ex minus debitis? Qui voluptates modi nostrum nam commodi.</div>
    <div class="imh-6310-custom-temp-19-read-more">
      <a href="#">Read more</a>
    </div>
  </div>
</div>

.imh-6310-custom-temp-19 {
    background: #fff;
    width: 350px;
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease 0s;
    border: 1px solid #f6931e;
  }
  .imh-6310-custom-temp-19-icon {
    float: left;
    width: 100%;
    padding-top: 15px;
    background: #fff;
  }
  .imh-6310-custom-temp-19-icon img {
    height: 200px;
    border-radius: 10px;
  }
  .imh-6310-custom-temp-19 .imh-6310-custom-temp-19-content {
    width: 100%;
    float: left;
    padding: 7px 15px;
    background: #295F2E;
    transition: all 0.3s ease 0s;
  }
  .imh-6310-custom-temp-19-title {
    font-size: 22px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 5px 0;
  }
  .imh-6310-custom-temp-19-description {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    font-style: italic;
    text-transform: capitalize;
    margin: 0 0 5px 0;
  }
  .imh-6310-custom-temp-19-read-more{
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
  }
  
  .imh-6310-custom-temp-19-read-more a {
    text-decoration: none;
    font-size: 14px;
    color: rgb(0, 0, 0);
    width: 150px;
    border: 1px solid;
    padding: 5px 15px;
    background: #ffffff;
  }
  
  .imh-6310-custom-temp-19-read-more a:hover {
    background: #dddd;
  }
  @media only screen and (max-width: 990px) {
    .imh-6310-custom-temp-19 {
      margin-bottom: 30px;
    }
  }

<div class="imh-6310-custom-temp-20">
  <div class="imh-6310-custom-temp-20-icon">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo20">
  </div>
  <div class="imh-6310-custom-temp-20-title">Your title</div>
  <div class="imh-6310-custom-temp-20-description">Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Qui quaerat
    fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.</div>
  <div class="imh-6310-custom-temp-20-read-more">
    <a href="#">Read more</a>
  </div>
</div>

.imh-6310-custom-temp-20 {
    width: 350px;
    float: left;
    background: lightcyan;
    border: 2px solid #0b7274;
    box-shadow: rgb(11 114 116 / 50%) 0px 3px 6px, rgb(11 114 116 / 0%) 0px 3px 6px;
    color: #555;
    font-family: 'Nunito', sans-serif;
    text-align: center;
    padding: 15px 0 0;
    border: 1px solid #d7d7d7;
}

.imh-6310-custom-temp-20 .imh-6310-custom-temp-20-icon {
    color: #fff;
    background: #0B7274;
    font-size: 45px;
    line-height: 103px;
    width: 150px;
    height: 150px;
    margin: 0 auto 65px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
}

.imh-6310-custom-temp-20-icon img {
    width: 100%;
}

.imh-6310-custom-temp-20 .imh-6310-custom-temp-20-icon:before,
.imh-6310-custom-temp-20 .imh-6310-custom-temp-20-icon:after {
    content: "";
    width: calc(100% + 30px);
    height: calc(100% + 30px);
    border: 5px solid #0b727400;
    border-bottom-color: #0b7274;
    border-left-color: transparent;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
}

.imh-6310-custom-temp-20 .imh-6310-custom-temp-20-icon:after {
    background-color: #0B7274;
    height: 40px;
    width: 35px;
    border-radius: 0;
    border: none;
    transform: translateX(-50%) translateY(0) rotate(0);
    top: calc(100% + 10px);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

.imh-6310-custom-temp-20 .imh-6310-custom-temp-20-title {
    color: #0B7274;
    font-size: 22px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0 0 10px;
}

.imh-6310-custom-temp-20 .imh-6310-custom-temp-20-description {
    font-size: 15px;
    line-height: 25px;
    margin: 0;
    padding: 0 5px;
}

.imh-6310-custom-temp-20-read-more {
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
}

.imh-6310-custom-temp-20-read-more a {
    text-decoration: none;
    font-size: 14px;
    color: white;
    width: 150px;
    border: 1px solid;
    padding: 5px 15px;
    background: #18c7a9;
}

.imh-6310-custom-temp-20-read-more a:hover {
    background: #259783;
}

@media only screen and (max-width: 990px) {
    .imh-6310-custom-temp-20 {
        margin: 0 0 40px;
    }
}