1

Есть мой пример,

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>

нужно перенести h3 заголовок в вверх блока, над надписью "от 500 руб." и изображением, пример: введите сюда описание изображения

Хотелось бы сохранить оба варианты использования расположения заголовков, чтобы обыграть блоки с акциями отлично от стандартного исполнения.

1 ответ 1

1

Могу предложить два варианта (второй и третий блок добавил в сниппете). Третий вариант реализовал потому что мне показался некрасивым второй. Без изменения композиции изображения и без изменения размеров блока не получается красиво разместить и цену и h3 сверху: почти половина изображения закрыта. Поэтому попробовал опустить цену на нижний край.

В css добавил 4 строчки в конце. по две на каждый вариант.

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>

1
  • Спасибо, Иван! С версткой испытываю сложности(
    – aliokero
    11 авг 2016 в 20:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.