Верстаю 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;
}
transform: translateY(-20px);
?