CODEWITHSUNDEEP
javascripthtmlcss
Kjetil
Kjetil

Reputation: 11

Expand current div on hover and shrink others

I'm working on a project in school where I want some sort of slideshow on the webpage. I've gotten to a place where I'm not sure how to proceed. Here is what I got so far:

body {
  background-color: #252525;
}

#wrapper {
  width: 90%;
  margin: 0 auto;
  padding: 2%;
}

#images {
  width: 100%;
  height: 300px;
  text-align: center;
  overflow: auto;
}

#container-1 {
  display: inline-block;
  background-color: #fff;
  width: 100px;
  height: 300px;
  transition: .5s ease-in-out;
}

#container-1:hover {
  background-color: #189fff;
  width: 80%;
  height: 300px;
}

.container {
  width: 100px;
  height: 300px;
  background-color: #fff;
  display: inline-block;
  transition: .5s ease-in-out;
}

.container:hover {
  background-color: #189fff;
  width: 80%;
  height: 300px;
}
<div id="wrapper">
  <div id="images">
    <div id="container-1"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
  </div>
</div>

What I want this to do is for whenever I hover one of these images (or divs if you will), it will expand and show the whole image. There are two images, one clipped, and one that is the whole image. (Maybe thats a bad thing?)

The class container is just temporary to get an image of how it will look and give the other divs a background color. In #container-1:hover, the width is not the exact one I'm going to use. It might differ from the images I'm using.

Also if I don't use overflow: auto; the other divs will be pushed below the others, which is something I don't want.

The code in a way works as I want it. The only problem I got really is that when I hover one of the divs, it will push the other ones to the side, creating a conflict. Is there a way to make that not happen? Maybe a way to reduce the width of the other divs when the current div is being hovered on?

I just recently started with JavaScript so I'm nowhere close experienced with it, but I'm open for suggestions, but we are not allowed to use jQuery or anything like that sadly.

Here is a fiddle of it: jsfiddle

Upvotes: 1

Views: 647

Answers (1)

Johannes
Johannes

Reputation: 67798

Your problem is that when one of the elements is hovered and expands, the sum of all elements exceeds the width of the container, and the one or two last elements are pushed below the others (into the next line).

To avoid that using only CSS, you have to choose width values where three default elements and one expanded (hovered) elements together don't exceed 100% of the container, like in this fiddle:

https://jsfiddle.net/kju94h1n/

To make non-hovered elements narrower when another element is hovered would require Javascript.

Upvotes: 1

Related Questions