0

Верстаю psd-шку,дошел вот до определенного блока,вот что нужно сделать: введите сюда описание изображения

При наведении на контейнер в котором храниться цена ($0 и $19) нужно чтобы с низу выезжала эта желтая надпись(реализовал при помощи position,по умолчанию она bottom: -35px относительно контейнера с ценой,при наведении bottom: 0),и чтобы блок становился выше,обычная смена высоты приводит к тому,что блок растет в низ.

Вот код,будет слегка кривовато т.к стили я скинул только для айтемов,сорре

html:

<div class="pricing__item">
                    <div class="price__title opensans-b">Professional</div>
                    <div class="price__sal">
                        <p><span>$</span>19</p>
                        <p class="opensans-r">Monthly Payment</p>
                        <div class="price__slider opensans-b">Our most popular</div>
                    </div>
                    <div class="price__option">
                        <p class="opensans-r">5gb of space</p>
                        <p class="opensans-r">50gb of bandwidth</p>
                        <p class="opensans-r">12 websites</p>
                        <p class="opensans-r">Advenced customization</p>
                        <p class="opensans-r">wordpress integration</p>
                        <p class="opensans-r">email support</p>
                    </div>
                </div>

css:

.pricing__item{
    width: 30%;
    display: flex;
    flex-direction: column;
}

.price__title{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;

    color: #fff;
    background: #333;
    border-bottom: 1px solid #f5f5f5;
}

.price__sal{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    color: #fff;
    font-family: "Raleway",sans-sefir;
    font-size: 94px;
    font-weight: 700;
    background: #333;

    transition: all .2s;
    overflow: hidden;
    position: relative;
}

.price__sal:hover .price__slider{
    transform: translateY(0px);
}

.price__sal span{
    font-size: 35px;
}

.price__sal p:first-child{
    margin-bottom: 5px;
}

.price__sal p:nth-child(2){
    margin-bottom: 20px;

    color: #fff;
    font-weight: 600;
    opacity: .5;
}

.price__slider{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    transform: translateY(35px);

    background: #ff8b38;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;

    transition: all .2s;

}

.price__option{
    display: flex;
    flex-direction: column;
}

.price__option p{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    text-transform: uppercase;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
}

2
  • А если изначально делать темное и оранжевое как один целый блок, который будет под белым слоем? А при наведении делать transform: translateY(-20px); ? 22 ноя 2019 в 18:22
  • @OPTIMUS PRIME глянь код
    – daladn0
    22 ноя 2019 в 20:05

2 ответа 2

1

Тут вообще куча вариантов как всё это сделать, вот один из:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #E0E0E0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  height: 300px;
  width: 200px;
  display: flex;
  flex-direction: column;
  
  position: relative;
}

header {
  background-color: #212121;
  height: 30%;
  z-index: 1;
  transition: transform 0.5s;
}

header:hover {
  transform: translateY(-30%);
}

h3 {
  position: absolute;
  height: 32%;
  width: 100%;
  padding-bottom: 2.5%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  
  
  font-family: sans-serif;
  color: white;
  background-color: #FF6F00;
}

ul {
  height: 70%;
  background-color: white;
  z-index: -1;
}
<div>
   <header></header>
   <h3>Our most popular</h3>
   <ul></ul>
</div>

1

.list{
  list-style-type: none;
  margin: auto;
  width: 60%;
  border: 20px solid rgba(255, 255, 255, .8);
  padding-left: 0;
}
.list li:nth-child(1){
  text-transform: capitalize;
  color: #fff;
  font-size: 20px;
  background-color: rgba(0, 0, 0, .8);
  text-align: center;
  border-bottom: 1px solid #fff;
  padding: 15px 0;
  font-weight: bold;
}

.list li:nth-child(2){
  color: #fff;
  font-size: 30px;
  background-color: rgba(0, 0, 0, .8);
  text-align: center;
  border-bottom: 4px solid orange;
  padding-top: 15px 0;
  position: relative;
}

.list li:nth-child(2) > div{
  width: 100%;
  height: 20px;
  background-color:orange;
  text-transform: uppercase;
  font-size: 20px;
  padding: 10px 0;
  display: none;
}
.list li:hover div{
  display: block;
}
.list li span{
    font-size: 30px;
    position: relative;
    letter-spacing: 3px;
}

.list .dollar:after{
  content: 'O';
  font-size: 60px;
}

.list li span + span{
  display: block;
  color: grey;
  font-style: italic;
  text-transform: capitalize;
  font-size: 15px;
  padding-bottom: 15px;
}

.list li:nth-child(2) ~ li{
  color: grey;
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid grey;
  text-transform: uppercase;
}

.list li:nth-child(3) ~ li:last-child{
   border-bottom: 1px solid grey;
}
<ul class="list">
  <li>basic</li>
  <li>
   <span class='dollar'>$</span>
   <span>free for life</span>
     <div class="block">
       our most popular
     </div>
  </li>
  <li> 1 gb of space</li>
  <li>10 gb of bandwidth</li>
  <li>3websites</li>
  <li>basic customization</li>
  <li>wordpress integration</li>
  <li>email support</li>  
</ul>

2
  • Так оно же увеличивается в низ :/
    – daladn0
    22 ноя 2019 в 20:22
  • А надо вверх,я же написал "чтобы блок становился выше,обычная смена высоты приводит к тому,что блок растет в низ." Надо как на картинке
    – daladn0
    22 ноя 2019 в 20:29

Ваш ответ

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

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