在悬停时展开 div，使用引导程序答案

【问题标题】：expand div on hover, with bootstrap在悬停时展开 div，使用引导程序
【发布时间】：2017-07-04 21:56:20
【问题描述】：

我有一个小问题。

目前，我有这样的结构（在整页中运行）

.color{
    background : red;
}

.color-green{
    background : green;
}

.vertical-align {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<body>
  <div class="container-fluid color-green vertical-align">
    <div class="row">
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
    </div>
  </div>
</body>

我想像这样在悬停时独立展开 div

但我使用引导程序，我不知道如何使用引导程序..

如果您有想法或要遵循的路线

谢谢

【问题讨论】：

标签： html css twitter-bootstrap hover

【解决方案1】：

在:hover 上，您可以使用transform: scale() 使元素更大，更改background，并添加position: relative; z-index: 1; 以将该元素保持在其兄弟元素之上。如果需要，请使用transition 来创建平滑过渡。

.color{
    background : red;
}

.color-green{
    background : green;
}

.vertical-align {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.color-green > .row > .text-center {
  transition: transform .25s, background .25s;
}
.color-green > .row > .text-center:hover {
  transform: scale(1.2);
  background: #8dc63f;
  position: relative;
  z-index: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<body>
  <div class="container-fluid color-green vertical-align">
    <div class="row">
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
      <div class="col-lg-4 text-center">
        <h1>Titre</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur assumenda atque, commodi corporis deserunt eius enim laborum natus obcaecati optio, quidem quos repudiandae saepe tempora tempore unde veritatis.</p>
      </div>
    </div>
  </div>
</body>

【讨论】：

如果我只想扩展背景而不是文本，我该怎么做？
@simonmnt stackoverflow.com/questions/21300673/…
谢谢，但不是我搜索的效果。您是否知道如何在没有缩放缩放、隔离文本和仅背景移动的情况下获得相同的效果
@simonmnt 缩放背景而不是文本。你把background-size改成:hover
好的，我只是将scale 更改为background-size 上的:hover 吗？