There is my example

figure.service-item{font-family:'Raleway',Arial,sans-serif;position:relative;float:left;overflow:hidden;margin:10px 1%;min-width:220px;max-width:310px;width:100%;background:#000;color:#333;text-align:left;box-shadow:0 0 5px rgba(0,0,0,0.15)} figure.service-item *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .35s cubic-bezier(0.25,0.5,0.5,0.9);transition:all .35s cubic-bezier(0.25,0.5,0.5,0.9)} figure.service-item img{max-width:100%;vertical-align:top} figure.service-item figcaption{position:relative;background-color:#fff;padding:20px 25px 50px} figure.service-item h3{padding:5px;font-size:1em;text-align:center;width:100%;position:absolute;bottom:100%;text-transform:uppercase;line-height:26px;margin:0;left:0;font-weight:400;background-color:rgba(127,118,121,0.70);color:#fff} figure.service-item h3 span{font-weight:800} figure.service-item p{font-size:.8em;font-weight:500;text-align:left;margin:0;line-height:1.6em} figure.service-item .price{position:absolute;top:0;right:0;color:#fff;background-color:rgba(127,118,121,0.70);padding:0 10px;line-height:40px} figure.service-item a{width:100%;text-align:center;text-decoration:none;position:absolute;bottom:0;right:0;background-color:#e6e6e6;line-height:40px;padding:0 10px;color:#b55489;font-weight:600;font-size:.9em;text-transform:uppercase} figure.service-item.blue{background-color:#2472a4} figure.service-item.blue h3,figure.service-item.blue a,figure.service-item.blue .price{background-color:#2472a4} figure.service-item.blue .price:before{border-color:transparent #2472a4} figure.service-item.blue h3:before{border-color:transparent transparent transparent #2472a4} figure.service-item.blue a:before{border-color:transparent transparent #2472a4} figure.service-item.red{background-color:#ab3326} figure.service-item.red h3,figure.service-item.red a,figure.service-item.red .price{background-color:#ab3326} figure.service-item.red .price:before{border-color:transparent #ab3326} figure.service-item.red h3:before{border-color:transparent transparent transparent #ab3326} figure.service-item.red a:before{border-color:transparent transparent #ab3326} figure.service-item.orange{background-color:#d67118} figure.service-item.orange h3,figure.service-item.orange a,figure.service-item.orange .price{background-color:#d67118} figure.service-item.orange .price:before{border-color:transparent #d67118} figure.service-item.orange h3:before{border-color:transparent transparent transparent #d67118} figure.service-item.orange a:before{border-color:transparent transparent #d67118} figure.service-item:hover img,figure.service-item.hover img{-webkit-transform:scale(1.1);transform:scale(1.1)} 
  <figure class="mix service-item"> <img class="lazy" src="http://dummyimage.com/310x200" alt="sample71"/> <div class="price">от 500.00<i class="fa fa-rub fa-fw" aria-hidden="true"></i></div> <figcaption> <h3>Мужские стрижки (Барбершоп)</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae est dictum, dignissim quam maximus massa nunc.</p> <a href="#">Посмотреть цены</a> </figcaption> </figure>

you need to transfer the h3 heading to the top of the block, above the inscription "from 500 rub." and image example: enter image description here

I would like to retain both options for using header layout to beat blocks with stocks different from the standard version.

    1 answer 1

    I can offer two options (the second and third blocks are added in the snippet). The third option is implemented because it seemed to me an ugly second. Without changing the composition of the image and without changing the size of the block, it is impossible to nicely place both the price and h3 on top: almost half of the image is closed. Therefore, I tried to lower the price on the bottom edge.

    In css added 4 lines at the end. two for each option.

     figure.service-item{font-family:'Raleway',Arial,sans-serif;position:relative;float:left;overflow:hidden;margin:10px 1%;min-width:220px;max-width:310px;width:100%;background:#000;color:#333;text-align:left;box-shadow:0 0 5px rgba(0,0,0,0.15)} figure.service-item *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .35s cubic-bezier(0.25,0.5,0.5,0.9);transition:all .35s cubic-bezier(0.25,0.5,0.5,0.9)} figure.service-item img{max-width:100%;vertical-align:top} figure.service-item figcaption{position:relative;background-color:#fff;padding:20px 25px 50px} figure.service-item h3{padding:5px;font-size:1em;text-align:center;width:100%;position:absolute;bottom:100%;text-transform:uppercase;line-height:26px;margin:0;left:0;font-weight:400;background-color:rgba(127,118,121,0.70);color:#fff} figure.service-item h3 span{font-weight:800} figure.service-item p{font-size:.8em;font-weight:500;text-align:left;margin:0;line-height:1.6em} figure.service-item .price{position:absolute;top:0;right:0;color:#fff;background-color:rgba(127,118,121,0.70);padding:0 10px;line-height:40px} figure.service-item a{width:100%;text-align:center;text-decoration:none;position:absolute;bottom:0;right:0;background-color:#e6e6e6;line-height:40px;padding:0 10px;color:#b55489;font-weight:600;font-size:.9em;text-transform:uppercase} figure.service-item.blue{background-color:#2472a4} figure.service-item.blue h3,figure.service-item.blue a,figure.service-item.blue .price{background-color:#2472a4} figure.service-item.blue .price:before{border-color:transparent #2472a4} figure.service-item.blue h3:before{border-color:transparent transparent transparent #2472a4} figure.service-item.blue a:before{border-color:transparent transparent #2472a4} figure.service-item.red{background-color:#ab3326} figure.service-item.red h3,figure.service-item.red a,figure.service-item.red .price{background-color:#ab3326} figure.service-item.red .price:before{border-color:transparent #ab3326} figure.service-item.red h3:before{border-color:transparent transparent transparent #ab3326} figure.service-item.red a:before{border-color:transparent transparent #ab3326} figure.service-item.orange{background-color:#d67118} figure.service-item.orange h3,figure.service-item.orange a,figure.service-item.orange .price{background-color:#d67118} figure.service-item.orange .price:before{border-color:transparent #d67118} figure.service-item.orange h3:before{border-color:transparent transparent transparent #d67118} figure.service-item.orange a:before{border-color:transparent transparent #d67118} figure.service-item:hover img,figure.service-item.hover img{-webkit-transform:scale(1.1);transform:scale(1.1)} figure.service-item.with-top-title h3{top:-200px;height:40px;} figure.service-item.with-top-title .price{top:41px;} figure.service-item.with-top-title2 h3{top:-200px;height:40px;} figure.service-item.with-top-title2 .price{top:160px;height:40px;} 
     <figure class="mix service-item"> <img class="lazy" src="http://dummyimage.com/310x200" alt="sample71"/> <div class="price">от 500.00<i class="fa fa-rub fa-fw" aria-hidden="true"></i></div> <figcaption> <h3>Мужские стрижки (Барбершоп)</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae est dictum, dignissim quam maximus massa nunc.</p> <a href="#">Посмотреть цены</a> </figcaption> </figure> <figure class="mix service-item with-top-title"> <img class="lazy" src="http://dummyimage.com/310x200" alt="sample71"/> <div class="price">от 500.00<i class="fa fa-rub fa-fw" aria-hidden="true"></i></div> <figcaption> <h3>Мужские стрижки (Барбершоп)</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae est dictum, dignissim quam maximus massa nunc.</p> <a href="#">Посмотреть цены</a> </figcaption> </figure> <figure class="mix service-item with-top-title2"> <img class="lazy" src="http://dummyimage.com/310x200" alt="sample71"/> <div class="price">от 500.00<i class="fa fa-rub fa-fw" aria-hidden="true"></i></div> <figcaption> <h3>Мужские стрижки (Барбершоп)</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae est dictum, dignissim quam maximus massa nunc.</p> <a href="#">Посмотреть цены</a> </figcaption> </figure>

    • Thank you Ivan! I have difficulty with layout ( - aliokero