CODEWITHSUNDEEP
htmlcsstwitter-bootstraphover
simonmnt
simonmnt

Reputation: 59

expand div on hover, with bootstrap

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 enter image description here

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

Upvotes: 1

Views: 2904

Answers (1)

Michael Coker
Michael Coker

Reputation: 53684

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>

Upvotes: 3

Related Questions