expand div on hover, with bootstrap

Question

I have a littre problem.

Curently, I have a struture like this (run in full page)

.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>

I would like to expand div on hover independently like this

But i use bootstrap, and I don't know how to make that with bootstrap..

if you have an idea or track to follow

thanks

score 3 · Accepted Answer · answered Jul 04 '17 at 22:30

on :hover, you can use transform: scale() to make the element bigger, change the background, and add position: relative; z-index: 1; to keep that element on top of it's siblings. And use transition to create a smooth transition, if you want that.

.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>

If I would like to expand only the background not the text, how i do that ? — simonmnt, Jul 05 '17 at 06:31
@simonmnt https://stackoverflow.com/questions/21300673/how-do-i-zoom-a-background-image-on-a-div-with-background-size — Michael Coker, Jul 05 '17 at 13:17
Thanks, but is not the effect i search. Do you have an idea how to get the same effect without the scale zoom, isolated the text and just background moove — simonmnt, Jul 05 '17 at 15:43
@simonmnt that zooms the background and not the text. You change `background-size` on `:hover` — Michael Coker, Jul 05 '17 at 15:46
Ok, I just change `scale` by the `background-size` on `:hover` ? — simonmnt, Jul 05 '17 at 19:35
@simonmnt yes, if you read the post I linked to, the accepted solution has a few approaches. Use the 2nd one. — Michael Coker, Jul 05 '17 at 19:38
The problem with the linked post, zoom effect is inside a div. Isn't detached like a effect I try to do — simonmnt, Jul 05 '17 at 20:45

expand div on hover, with bootstrap

1 Answers1