Twitter Bootstrap Question posted in

Bootstrap column enlarge on hover (Like Netflix)-Twitter bootstrap

I have a grid view that looks like the following:

 jQuery(window).resize(function(evt) {
   jQuery(".grid-content > div > div > .channelImage").height(jQuery(".grid-content > div > div > .channelImage").width());
 });
 jQuery(function() {
   jQuery(window).resize();
 });
    body {
      background-color: rgba(48, 48, 48, 1);
    }

    body>.container {
      max-width: 90vw;
    }

    .previewrow {
      height: 40vh;
    }

    .preview {
      position: absolute;
      left: 0;
      right: 0;
      height: 40vh;
    }

    .grid-content>div>div {
      margin: 3vw;
      box-shadow: 6px 6px 6px black;
      border: 1px solid white;
      text-align: center;
      color: white;
    }

    .grid-content>div {
      float: left;
    }

    .grid-content>div>div>.channelImage {}

    .grid-content>div>div>.channelImage:before {
      content: " ";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    .grid-content>div:hover>div {
      box-shadow: 0 0 0 black;
      transition: all 0.25s;
      margin: 1em;
    }
<!-- Bootstrap and JavaScript -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap-grid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="container body-content">
    <div class="grid-content">

      <!-- One -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
      <!-- Two -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
      <!-- Three -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            some text
          </div>
        </div>
      </div>
      <!-- Four -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
      <!-- Five -->
      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-2">
        <div>
          <div class="channelImage">
            <img width="30%" />
          </div>
          <div>
            Some text
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

As you can see I am trying to enlarge the squares whenever the user hovers over the square. But adjusting the margins results in other boxes being moved. How can I enlarge the squares so they do not move other boxes?

Tags:

2

Answers


  1. 0

    You can make something bigger without moving anything around it by using the following CSS and applying it to the element you want to effect:

    .class {
  transition: .10s, transform .10s ease;
  -moz-transition: .10s, transform .10s ease;
  -webkit-transition: .10s, transform .10s ease;
}

.class:hover {
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari */
  transform: scale(1.01);
}

    As a bonus, you can make it shrink back down when you click it to make a spring-like effect:

    .class:active {
  -ms-transform: scale(0.99); /* IE 9 */
  -webkit-transform: scale(0.99); /* Safari */
  transform: scale(0.99);
}
    Login or Signup to reply.
  2. 0

    I’m just thinking about this but I’m not using Bootstrap though.

    Can’t you just use another image/element, get the x and y co-ords of the underlying element and place on top. The element on top displays the contents of the element below but is larger in size. You could make the width of the element below wider too. So that the elements to the right move over. The elements beneath will not move.

    I’ve just done this quickly and it works quite well. The only problem I have is getting the x, y co-ords on scrolling.

    I will post the code once I have finished.

    Thanks.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search