Image Hotspot Templates 01-10

Image Hotspot Custom Template 01-10
Purchase Plugin
Custom Template 01-10
Custom Template 11-20
Custom Template 21-30
Custom Slider Template

Custom Template 01

Live Demo
Parking Zone
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam aliquid consequatur, corporis deserunt doloremque ea eaque enim eum non perferendis praesentium repudiandae sunt tenetur totam unde ut vitae voluptate.
Read more
Click to Copy HTML 
<div class="imh-6310-custom-temp-01">
    <div class="imh-6310-custom-temp-01-icon">
      <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="">
    </div>
    <div class="imh-6310-custom-temp-01-content">
      <div class="imh-6310-custom-temp-01-title">Parking Zone</div>
      <div class="imh-6310-custom-temp-01-description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aliquam aliquid consequatur, corporis deserunt
        doloremque ea eaque enim eum non perferendis praesentium repudiandae sunt tenetur totam unde ut vitae
        voluptate.
      </div>
      <div class="imh-6310-custom-temp-01-read-more">
        <a href="#">Read more</a>
      </div>
    </div>
  </div>
Click to Copy CSS 
.imh-6310-custom-temp-01 {
    float: left;
    width: 350px;
    background: #ce165a;
    border: 5px solid white;
    box-shadow: 0 0 7px 0px black;
    padding: 10px;
    text-align: center;
    font-family: sans-serif;
}

.imh-6310-custom-temp-01-icon img {
    width: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.imh-6310-custom-temp-01 .imh-6310-custom-temp-01-icon {
    width: 100px;
    height: 100px;
    margin: 5px auto 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imh-6310-custom-temp-01 .imh-6310-custom-temp-01-icon i {
    font-size: 40px;
    color: #211a0f;
}

.imh-6310-custom-temp-01 .imh-6310-custom-temp-01-title {
    font-size: 26px;
    color: #ffffff;
    font-weight: 700;
}

.imh-6310-custom-temp-01 .imh-6310-custom-temp-01-title:after {
    content: "";
    display: block;
    width: 0;
    height: 5px;
    margin: 0 auto;
    background: #ec4151;
    transition: all 0.3s ease-in-out 0s;
}

.imh-6310-custom-temp-01 .imh-6310-custom-temp-01-description {
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
    line-height: 27px;
}

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

.imh-6310-custom-temp-01-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-09-read-more a:hover {
    background: #259783;
}

@media only screen and (max-width: 990px) {
    .imh-6310-custom-temp-01 {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .imh-6310-custom-temp-01 {
        min-height: 300px;
    }
}

@media only screen and (max-width: 479px) {
    .imh-6310-custom-temp-01 {
        min-height: 320px;
    }
}

Custom Template 02

Live Demo
demo-2
Food Corner
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto cum dolore dolores fuga libero magni placeat possimus sequi
Read more
Click to Copy HTML 
<div class="imh-6310-custom-temp-02">
    <div class="imh-6310-custom-temp-02-icon">
        <img src="https://wpmart.org/wp-content/uploads/2022/10/fast_food.png" alt="demo-2">
    </div>
    <div class="imh-6310-custom-temp-02-content">
        <div class="imh-6310-custom-temp-02-title">Food Corner</div>
        <div class="imh-6310-custom-temp-02-description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto cum dolore dolores fuga
            libero
            magni placeat possimus sequi
        </div>
        <div class="imh-6310-custom-temp-02-read-more">
            <a href="#">Read more</a>
        </div>
    </div>
</div>
Click to Copy CSS 
.imh-6310-custom-temp-02 {
    width: 350px;
    border: 1px solid #41d7f7;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #b2fefa, #ffffff);
}

.imh-6310-custom-temp-02:before,
.imh-6310-custom-temp-02:after {
    content: "";
    display: block;
    width: 50px;
    height: 5px;
    background: #41d7f7;
    position: absolute;
    left: 40px;
    opacity: 1;
    transition: all 0.5s ease 0s;
}

.imh-6310-custom-temp-02:before {
    top: -3px;
}

.imh-6310-custom-temp-02:after {
    bottom: -3px;
}

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

.imh-6310-custom-temp-02-icon {
    float: left;
    width: 40%;
}

.imh-6310-custom-temp-02-content {
    float: left;
    width: 70%;
}

.imh-6310-custom-temp-02 .imh-6310-custom-temp-02-title {
    font-size: 25px;
    font-weight: 700;
    color: #41d7f7;
}

.imh-6310-custom-temp-02 .imh-6310-custom-temp-02-description {
    font-size: 15px;
    color: rgb(0, 0, 0);
    line-height: 25px;
    font-family: sans-serif;
}

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

.imh-6310-custom-temp-02-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-02-read-more a:hover {
    background: #259783;
}

@media only screen and (max-width: 990px) {
    .imh-6310-custom-temp-02 {
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
    }

    .imh-6310-custom-temp-02-content {
        text-align: center;
    }
}

Custom Template 03

Live Demo
demo3
Gear Wheel
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit quisquam amet ab facere error debitis illo aut perferendis .
Read more
Click to Copy HTML 
<div class="imh-6310-custom-temp-03">
  <div class="imh-6310-custom-temp-03-icon">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo3">
  </div>
  <div class="imh-6310-custom-temp-03-content">
    <div class="imh-6310-custom-temp-03-title">Gear Wheel</div>
    <div class="imh-6310-custom-temp-03-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit
      quisquam amet ab facere error debitis illo aut perferendis .</div>
    <div class="imh-6310-custom-temp-03-read-more">
      <a href="#">Read more</a>
    </div>
  </div>
</div>
Click to Copy CSS 
.imh-6310-custom-temp-03 {
    color: #1C6E87;
    font-family: 'Poppins', sans-serif;
    background: #fafad2;
    text-align: center;
    padding: 0 20px;
    width: 350px;
    border: 2px solid;
    float: left;
}

.imh-6310-custom-temp-03 .imh-6310-custom-temp-03-icon {
    font-size: 80px;
    transform: translateY(5px);
    line-height: 100px;
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
    border: 2px solid #1C6E87;
    overflow: hidden;
}

.imh-6310-custom-temp-03-icon img {
    width: 100%;
    display: block;
}

.imh-6310-custom-temp-03 .imh-6310-custom-temp-03-content {
    background-color: rgba(255, 255, 255, 0);
    padding: 15px 15px 15px;
    border: 10px solid #1C6E87;
    border-left: none;
    border-right: none;
    float: left;
    width: 100%;
}

.imh-6310-custom-temp-03 .imh-6310-custom-temp-03-title {
    color: #1c6e87;
    font-size: 30px;
    line-height: 35px;
    font-weight: 600;
    letter-spacing: 2px;
    display: block;
}

.imh-6310-custom-temp-03-description {
    font-size: 16px;
    color: #444;
    float: left;
    width: 100%;
}

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

.imh-6310-custom-temp-03-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-03-read-more a:hover {
    background: #259783;
}

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

Custom Template 04

Live Demo
Gear Wheel
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint aspernatur sapiente doloremque temporibus? Fugit, iusto, illo corporis quod nesciunt dolorum optio deleniti amet quibusdam explicabo quis asperiores ducimus excepturi quasi?
Read more
demo4
Click to Copy HTML 
<div class="imh-6310-custom-temp-04">
  <div class="imh-6310-custom-temp-04-title">Gear Wheel</div>
  <div class="imh-6310-custom-temp-04-description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint
    aspernatur sapiente doloremque temporibus? Fugit, iusto, illo corporis quod nesciunt dolorum optio deleniti amet
    quibusdam explicabo quis asperiores ducimus excepturi quasi?</div>
  <div class="imh-6310-custom-temp-04-read-more">
    <a href="#">Read more</a>
  </div>
  <div class="imh-6310-custom-temp-04-icon"><img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg"
      alt="demo4"></div>
</div>
Click to Copy CSS 
.imh-6310-custom-temp-04 {
    width: 350px;
    color: #444;
    background: linear-gradient(3deg, #ffc44b, white, white, #ffffff);
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    padding: 20px 15px;
    margin-top: 10px;
    box-shadow: 0 0 10px rgb(0 0 0 / 30%), 3px -3px #fcaa02;
    border-radius: 7px;
}

.imh-6310-custom-temp-04-title {
    color: #fff;
    background-color: #FCAA02;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 6px 5px;
    margin: 0 0 16px;
    border-radius: 5px;
}

.imh-6310-custom-temp-04 .imh-6310-custom-temp-04-description {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin: 0 0 15px;
    display: block;
    text-align: left;
}

.imh-6310-custom-temp-04 .imh-6310-custom-temp-04-icon {
    color: #FCAA02;
    font-size: 35px;
    line-height: 35px;
}

.imh-6310-custom-temp-04-icon img {
    width: 100px;
}

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

.imh-6310-custom-temp-04-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-04-read-more a:hover {
    background: #259783;
}

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

Custom Template 05

Live Demo
Your title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam repellat sed dolorum, placeat dolorem quaerat eos asperiores iusto velit. Tenetur excepturi porro id, quia suscipit unde cumque asperiores adipisci eligendi?
Read more
demo5
Click to Copy HTML 
<div class="imh-6310-custom-temp-05">
  <div class="imh-6310-custom-temp-05-title">Your title</div>
  <div class="imh-6310-custom-temp-05-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam repellat sed dolorum, placeat dolorem quaerat eos asperiores iusto velit. Tenetur excepturi porro id, quia suscipit unde cumque asperiores adipisci eligendi?</div>
  <div class="imh-6310-custom-temp-05-read-more">
    <a href="#">Read more</a>
  </div>
  <div class="imh-6310-custom-temp-05-icon">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo5">
  </div>
</div>
Click to Copy CSS 
.imh-6310-custom-temp-05 {
    width: 350px;
    background: #00203F;
    font-family: 'Noto Sans JP', sans-serif;
    text-align: center;
    padding: 0 0 25px;
    margin: 0 auto 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    position: relative;
}

.imh-6310-custom-temp-05 .imh-6310-custom-temp-05-title {
    color: #fff;
    background: linear-gradient(to right, #19bbd2, #2778ee);
    font-size: 38px;
    font-weight: 300;
    padding: 0 0 3px;
    margin: 0 0 25px;
    border-radius: 10px 10px 0 0;
    display: block;
}

.imh-6310-custom-temp-05 .imh-6310-custom-temp-05-description {
    color: #ffffff;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    margin: 0 0 25px;
    font-family: sans-serif;
    padding: 0 5px;
}

.imh-6310-custom-temp-05 .imh-6310-custom-temp-05-icon {
    color: #fff;
    background: linear-gradient(to right, #19bbd2, #2778ee);
    font-size: 40px;
    line-height: 100px;
    width: 130px;
    height: 130px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    outline: 6px solid #00203f;
    box-shadow: 0 0 9px 6px white;
}

.imh-6310-custom-temp-05-icon img {
    width: 100%;
    float: left;
}

.imh-6310-custom-temp-05.yellow .title {
    color: #e69814;
}

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

.imh-6310-custom-temp-05-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-05-read-more a:hover {
    background: #259783;
}

@media screen and (max-width:990px) {
    .imh-6310-custom-temp-05 {
        margin-bottom: 45px;
    }
}

Custom Template 06

Live Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra lectus quis placerat ultricies. Praesent ipsum turpis, mollis eget accumsan id, iaculis vel ipsum.
Read more
demo6
Car shop
Click to Copy HTML 
<div class="imh-6310-custom-temp-06">
  <div class="imh-6310-custom-temp-06-description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra lectus quis placerat ultricies. Praesent ipsum turpis, mollis eget accumsan id, iaculis vel ipsum.
  </div>
  <div class="imh-6310-custom-temp-06-read-more">
    <a href="#">Read more</a>
  </div>
  <div class="imh-6310-custom-temp-06-img">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo6">
  </div>
  <div class="imh-6310-custom-temp-06-title">Car shop</div>
</div>
Click to Copy CSS 
.imh-6310-custom-temp-06 {
    width: 350px;
    background: linear-gradient(#ffffff, #9effee);
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    float: left;
}

.imh-6310-custom-temp-06 .imh-6310-custom-temp-06-description {
    font-size: 15px;
    color: #585656;
    line-height: 27px;
    margin: 15px;
    font-family: cursive;
}

.imh-6310-custom-temp-06-img {
    display: inline-block;
    width: 130px;
    height: 130px;
    border: 5px solid #1bddc6;
    margin-bottom: 15px;
    position: relative;
    background: #fff;
    font-size: 50px;
    color: #1bddc6;
    box-sizing: border-box;
}

.imh-6310-custom-temp-06-img::after {
    content: "";
    border-width: 12px;
    border-style: solid;
    border-color: #1bddc6 #1bddc6 transparent transparent;
    position: absolute;
    bottom: -25px;
    right: 20%;
    transform: rotate(0deg);
}

.imh-6310-custom-temp-06-img img {
    width: 100%;
    height: auto;
}

.imh-6310-custom-temp-06-title {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #413f3f;
    letter-spacing: 1px;
    text-transform: capitalize;
    margin-bottom: 7px;
}

.imh-6310-custom-temp-06-read-more {
    float: left;
    width: 100%;
    margin: 15px 0;
    text-align: center;
}

.imh-6310-custom-temp-06-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-06-read-more a:hover {
    background: #259783;
}

Custom Template 07

Live Demo
demo7
Car
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu dolor eget ante pretium commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Read more
Click to Copy HTML 
<div class="imh-6310-custom-temp-07">
    <div class="imh-6310-custom-temp-07-icon">
        <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo7">
    </div>
    <div class="imh-6310-custom-temp-07-title">Car</div>
    <div class="imh-6310-custom-temp-07-description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu dolor eget ante pretium commodo. Cum sociis
        natoque
        penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </div>
    <div class="imh-6310-custom-temp-07-read-more">
        <a href="#">Read more</a>
    </div>
</div>
Click to Copy CSS 
.imh-6310-custom-temp-07 {
    text-align: center;
    padding: 50px 29px 5px;
    border-top: 5px solid #000000;
    position: relative;
    width: 350px;
    background: #3f51b5;
    margin-top: 80px !important;
    float: left;
}

.imh-6310-custom-temp-07 .imh-6310-custom-temp-07-icon {
    width: 120px;
    height: 120px;
    border: 5px solid #000000;
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.imh-6310-custom-temp-07 .imh-6310-custom-temp-07-icon img {
    width: 100%;
    height: auto;
}
.imh-6310-custom-temp-07-title {
    float: left;
    width: 100%;
    font-size: 35px;
    color: #fff;
    font-weight: 500;
    text-align: center;
}

.imh-6310-custom-temp-07 .imh-6310-custom-temp-07-description {
    font-size: 14px;
    color: #ffffff;
    line-height: 30px;
}

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

.imh-6310-custom-temp-07-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-07-read-more a:hover {
    background: #259783;
}

@media only screen and (max-width: 479px) {
    .imh-6310-custom-temp-07 {
        padding: 80px 15px 5px;
    }

    .imh-6310-custom-temp-07::before {
        top: 10px;
    }

    .imh-6310-custom-temp-07 .imh-6310-custom-temp-07-icon {
        width: 120px;
        height: 120px;
        top: -60px;
    }
}

Custom Template 08

Live Demo
demo8
hotel
Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
Read more
Click to Copy HTML 
<div class="imh-6310-custom-temp-08">
    <div class="imh-6310-custom-temp-08-icon">
        <img src="https://wpmart.org/wp-content/uploads/2022/10/fast_food.png" alt="demo8">
    </div>
    <div class="imh-6310-custom-temp-08-title">hotel</div>
    <div class="imh-6310-custom-temp-08-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-08-read-more">
        <a href="#">Read more</a>
    </div>
</div>
Click to Copy CSS 
.imh-6310-custom-temp-08 {
    width: 350px;
    color: #db7100;
    background: #db7100;
    font-family: 'Zen Maru Gothic', sans-serif;
    text-align: center;
    padding: 25px 20px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    float: left;
}

.imh-6310-custom-temp-08:before,
.imh-6310-custom-temp-08:after {
    content: "";
    background: linear-gradient(to right bottom, #fff, #eee);
    border-radius: 10px 10px 80px 10px;
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    z-index: -1;
}

.imh-6310-custom-temp-08:after {
    background: #db7100;
    width: 60px;
    height: 60px;
    border-radius: 10px 0 150% 0;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
}

.imh-6310-custom-temp-08 .imh-6310-custom-temp-08-icon {
    background: transparent;
    font-size: 45px;
    line-height: 87px;
    width: 50%;
    margin: 0 auto 15px;
}

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

.imh-6310-custom-temp-08-title {
    font-size: 21px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.imh-6310-custom-temp-08-description {
    color: #555;
    font-size: 15px;
    line-height: 23px;
}

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

.imh-6310-custom-temp-08-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-08-read-more a:hover {
    background: #259783;
}

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

Custom Template 09

Live Demo
demo9
Car Wash
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quaerat fugit quas veniam perferendis repudiandae sequi, dolore quisquam illum.
Read more
Click to Copy HTML 
<div class="imh-6310-custom-temp-09">
  <div class="imh-6310-custom-temp-09-icon">
    <img src="https://wpmart.org/wp-content/uploads/2022/01/skoda-kushaq.jpg" alt="demo9">
  </div>
  <div class="imh-6310-custom-temp-09-title">Car Wash</div>
  <div class="imh-6310-custom-temp-09-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-09-read-more">
    <a href="#">Read more</a>
  </div>
</div>
Click to Copy CSS 
.imh-6310-custom-temp-09 {
    width: 350px;
    float: left;
    background: linear-gradient(3deg, #ffeb3b, #03a9f4);
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    padding: 0px 25px 40px;
    margin: 20px 0 0;
    border-radius: 20px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

.imh-6310-custom-temp-09:before,
.imh-6310-custom-temp-09:after {
    content: "";
    background: linear-gradient(to top, #008d86, #01a2a6);
    width: 10px;
    border-radius: 0 100px 100px 0;
    position: absolute;
    top: 110px;
    bottom: 35px;
    left: 0;
}

.imh-6310-custom-temp-09:after {
    border-radius: 100px 0 0 100px;
    left: auto;
    right: 0;
}

.imh-6310-custom-temp-09 .imh-6310-custom-temp-09-icon {
    color: #fff;
    background: linear-gradient(-45deg, #008d86 49%, #01a2a6 50%);
    font-size: 45px;
    line-height: 92px;
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 100px;
    border: 5px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px);
    overflow: hidden;
}

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

.imh-6310-custom-temp-09-title {
    color: #ffffff;
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.imh-6310-custom-temp-09-description {
    color: #000;
    font-size: 14px;
    line-height: 24px;
    margin: 0;
}

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

.imh-6310-custom-temp-09-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-09-read-more a:hover {
    background: #259783;
}

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

Custom Template 10

Live Demo
demo10
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat elit sed est semper, ultricies maximus odio tempor. Ut viverra felis neque.
Read more
Click to Copy HTML 
<div class="imh-6310-custom-temp-10">
    <div class="imh-6310-custom-temp-10-icon">
        <img src="https://wpmart.org/wp-content/uploads/2022/01/popcorn.png" alt="demo10">
    </div>
    <div class="imh-6310-custom-temp-10-content">
        <div class="imh-6310-custom-temp-10-title">Lorem ipsum</div>
        <div class="imh-6310-custom-temp-10-description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat elit sed est semper, ultricies
            maximus odio tempor. Ut viverra felis neque.
        </div>
        <div class="imh-6310-custom-temp-10-read-more">
            <a href="#">Read more</a>
        </div>
    </div>
</div>
Click to Copy CSS 
.imh-6310-custom-temp-10 {
    width: 350px;
    background: #295F2E;
    text-align: center;
    margin: 20px 0 30px 0;
    float: left;
    display: flex;
    border: 1px solid #d1d1d1;
}

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

.imh-6310-custom-temp-10-icon {
    width: 150px;
    padding: 8px;
    border: 1px solid #dbdbdb;
    box-sizing: content-box;
    margin: 0 auto;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.imh-6310-custom-temp-10-content {
    float: left;
    width: 100%;
}

.imh-6310-custom-temp-10-title {
    text-transform: uppercase;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 1.25px;
    margin-bottom: 16px;
    color: #ffffff;
    transition: all 0.21s ease 0s;
}

.imh-6310-custom-temp-10-description {
    padding: 0 35px;
    color: #FFE67C;
    line-height: 1.7;
    font-size: 14px;
    font-family: sans-serif;
}

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

.imh-6310-custom-temp-10-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-10-read-more a:hover {
    background: #259783;
}