用 CSS 翻译到 div 的顶部

Question

我在一个液体容器中有 3 个盒子。

每个框都有一个标题、一个图标和下面的一些文本。

在 :hover 我希望图标移动到 <div> 的顶部并更改它的大小，我已经设法 "achieve" 它但使用了一定数量的像素。

如果标题文本较长且占用 2 行，则在移动分辨率下将不起作用。

这是我到目前为止所做的：

HTML

<div class="container">
<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn">
        <div class="service-box">
            <h2>Title</h2>
            <i class="fa fa-5x fa-paper-plane wow bounceIn market-icon" data-wow-delay=".1s"></i>
            <p class="">Certain text below the icon</p>
        </div>
    </div>
</div>

CSS

.container{
    text-align:center;
}

.market-blocks{
    background: #3aa0d1;
    padding: 30px 0 30px 0;
    cursor:pointer;
}

.orange{
  background: #e97d68;
}

i.market-icon { 
   -webkit-transition: 1s ease-in;
    -moz-transition: 1s ease-in;
    -o-transition: 1s ease-in;
    transition: 1s ease-in
}

.market-blocks:hover i.market-icon {
    -webkit-transform: translate(0,-70px);
    -moz-transform: translate(0,-70px);
    -o-transform: translate(0,-70px);
    -ms-transform: translate(0,-70px);
    transform: translate(0,-70px);
    font-size: 1.8em;
}

我该怎么做？还有从初始位置移动到 <div> 顶部的更好方法吗？

Answer 1

Pure HTML/CSS solution:

.container {
    text-align: center;
}

.market-blocks {
 background: #3aa0d1;
 padding: 30px 0;
 cursor: pointer;
}

.orange {
    background: #e97d68;
}

.service-box {
    display: inline-block;
}

.service-box-header {
    position: relative;
}

.market-title {
    padding-bottom: 5em;
    -webkit-transition: 1s ease-in;
    transition: 1s ease-in
}

.market-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: 1s ease-in;
    transition: 1s ease-in
}

    .market-blocks:hover .market-title {
        padding-bottom: 0;
    }

    .market-blocks:hover .market-icon {
        bottom: 100%;
        font-size: 1.8em;
    }

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn">
            <div class="service-box">
                <div class="service-box-header">
                    <h2 class="market-title">Very-very-very-very-very-very-very-very loooooooooooooooooooong title</h2>
                    <i class="fa fa-5x fa-paper-plane wow bounceIn market-icon"></i>
                </div>
                <p class="">Certain text below the icon</p>
            </div>
        </div>
    </div>
</div>

用 CSS 翻译到 div 的顶部

Translate with CSS to the top of a div

html

css

css-transitions

translate-animation