我有一个图标列表和悬停，图标的大小增加。但是，每个图标下方的文本随着大小的增加而向下移动。文本的顶部如何移动？停止悬停移动文本向下

HTML：

<div class="grid-wrap"> 
<div class="grid-col one-quarter"> 
    <span class="lnr lnr-mustache"></span> 
    <p>Text 1</p> 
</div> 
<div class="grid-col one-quarter"> 
    <span class="lnr lnr-sun"></span> 
    <p>Text 1</p> 
</div> 
<div class="grid-col one-quarter"> 
    <span class="lnr lnr-cog"></span> 
    <p>Text 1</p> 
</div> 
<div class="grid-col one-quarter"> 
    <span class="lnr lnr-star"></span> 
    <p>Text 1</p> 
</div>

CSS：

.grid-wrap {  
    margin-left: -3em; /* the same as your gutter */ 
    overflow: hidden; 
    clear: both; 
} 

.grid-col { 
    float: left; 
    padding-left: 3em; /* this is your gutter between columns */ 
    width: 100%; 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

.one-quarter { 
    width: 25%; 
} 

.lnr { 
    font-size: 40px; 
    transition: font-size 0.3s ease; 
} 

.lnr:hover { 
    font-size: 60px; 
}

Plunker：http://plnkr.co/edit/UxuLvRPP1RURdXGBfpb7?p=preview

注：HTML的结构应该理想地不作为其重要的改变，以保持文字在手机，平板电脑和台式机的图片下方。

来源

2016-02-03 Oam Psy

也许用'变换：scale'而不是增加字体大小？ –

你可以用transform:scale和transform-origin来做到这一点。您还需要进行其他一些小改动。因此，尝试这种Plunk

这里的CSS的片段，你需要改变：

.lnr { 
    font-size: 20pt; 
    line-height: 1em; 
    width: 1em; 
    display: inline-block; 
    margin-left: 10px; 
    margin-right: 5px; 
} 

.lnr:hover { 
    transform:scale(1.5); 
    transform-origin:50% 50%; 
    line-height: 1em; 
    width: 1em; 
    display: inline-block; 
    margin-left: 10px; 
    margin-right: 5px; 
}

全码：

/* Styles go here */ 
 
.grid-wrap { 
 
    margin-left: -3em; /* the same as your gutter */ 
 
    clear: both; 
 
} 
 
    
 
.grid-col { 
 
    float: left; 
 
    padding-left: 3em; /* this is your gutter between columns */ 
 
    width: 100%; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.one-quarter { 
 
    width: 25%; 
 
} 
 

 
.lnr { 
 
    font-size: 20pt; 
 
    line-height: 1em; 
 
    width: 1em; 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    margin-right: 5px; 
 
} 
 

 
.lnr:hover { 
 
    transform:scale(1.5); 
 
    transform-origin:50% 50%; 
 
    line-height: 1em; 
 
    -webkit-font-smoothing: antialiased; 
 
    width: 1em; 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
    margin-right: 5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 

 
    <div class="grid-wrap"> 
 
    <div class="grid-col one-quarter"> 
 
     <span class="lnr lnr-mustache"></span> 
 
     <p>Text 1</p> 
 
    </div> 
 
    <div class="grid-col one-quarter"> 
 
     <span class="lnr lnr-sun"></span> 
 
     <p>Text 1</p> 
 
    </div> 
 
    <div class="grid-col one-quarter"> 
 
     <span class="lnr lnr-cog"></span> 
 
     <p>Text 1</p> 
 
    </div> 
 
    <div class="grid-col one-quarter"> 
 
     <span class="lnr lnr-star"></span> 
 
     <p>Text 1</p> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

UPDATE

要添加动画，添加以下两个.lnr和.lnr:hover在你的CSS：

-webkit-transition: .2s ease; 
-moz-transition: .2s ease; 
-o-transition: .2s ease; 
transition: .2 ease;

在这里，你会得到0.2秒的动画。您也可以选择其他动画类型，例如linear。更多信息here

Updated Plunk

来源

2016-02-03 13:38:37 Chris

这很好，谢谢。但是，我希望字体的大小可以增长和缩小。而不是只是从大变小。 –

我明白了。只需在'.lnr'和'.lnr：hover'选择器中添加'transition：_s ease'，其中“_”是秒数。看到我上面的更新。 – Chris

使元素的最大可能大小的容器？

<div class='parent'> 
    <div class='lnr lnr-cog'> 
    </div> 
</div>

CSS

.parent{width:1.5em;height:1.5em;} 
.parent .lnr{font-size:0.8em;} 
.parent .lnr:hover{font-size:1em;}

这应该很好地工作。

来源

2016-02-03 13:37:43 sourRaspberri

停止悬停移动文本向下

回答

UPDATE

相关问题