CODEWITHSUNDEEP
csshover
Hirashi
Hirashi

Reputation: 29

Changing divs properties when another is hover

I'm trying to make one div width smaller, when another is hover. Hovewer i don't know how it should be writen with css syntax. I tried with "+" but only one div is smaller then, but i want to make another 3 divs smaller.

.portfolio .container-fluid {
  padding: 0px;
  overflow: hidden;
}
.p-section1 h1 {
  color: #fff;
  display: none;
  transition: 1s;
}
.p-section1,
.p-section2,
.p-section3,
.p-section4 {
  opacity: 0.2;
  width: 25%;
  float: left;
  min-height: 600px;
  transition: 1s;
}
.p-section1:hover,
.p-section2:hover,
.p-section3:hover,
.p-section4:hover {
  opacity: 1;
}
.p-section1 {
  background-image: url(img/a.PNG);
}
.p-section1:hover {
  background-image: url(img/a.PNG);
  width: 75%;
  transition: 1s;
}
.p-section1:hover .p-section2,
.p-section3,
.p-section4 {
  width: 8%;
}
.p-section2 {
  background-image: url(img/b.PNG);
}
.p-section2:hover {
  width: 75%;
}
.p-section3 {
  background-image: url(img/a.PNG);
}
.p-section3:hover {
  width: 75%;
}
.p-section4 {
  background-image: url(img/b.PNG);
}
.p-section4:hover {
  width: 75%;
}
<body class="portfolio">
  <div class="container-fluid">
    <div class="p-section1">
      <h1 class="text-center">Tytuł</h1>
    </div>
    <div class="p-section2">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section3">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section4">
      <h1 class="text-center">Tytuł</h1>
    </div>
  </div>

Upvotes: 0

Views: 38

Answers (2)

Asons
Asons

Reputation: 87191

Try using ~ instead

.p-section {
  float: left;
  width: 140px;
  background: gray;
  margin: 5px;
  overflow: hidden;
  transition: width 0.5s;
}

.p-section:hover ~ .p-section {
  width: 70px;
}
<body class="portfolio">

  <div class="container-fluid">
    
    <div class="p-section nr1">
      <h1 class="text-center">Tytuł</h1>
    </div>
    
    <div class="p-section nr2">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section nr3">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section nr4">
      <h1 class="text-center">Tytuł</h1>
    </div>

  </div>

</body>

Here is another way, using flex, like an accordion style.

.container-fluid {
  display: flex;
}
.p-section {
  width: 25%;
  background: gray;
  margin: 5px;
  overflow: hidden;
  transition: width 0.5s;
}

.p-section:hover {
  width: 50%;
}
<body class="portfolio">

  <div class="container-fluid">
    
    <div class="p-section nr1">
      <h1 class="text-center">Tytuł</h1>
    </div>
    
    <div class="p-section nr2">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section nr3">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section nr4">
      <h1 class="text-center">Tytuł</h1>
    </div>

  </div>

</body>

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 114990

You can apply change the widths of ALL children when hovering to the parent and then override the smaller width with hover on the specific child.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.portfolio .container-fluid {
  padding: 0px;
  overflow: hidden;
}
h1 {
  font-size: 1rem;
  /*demo only */
}
[class^="p-section"] {
  width: 25%;
  transition: width .5s ease;
  float: left;
  min-height: 100px;
  border: 1px solid grey;
}
.portfolio .container-fluid:hover [class^="p-section"] {
  width: 8%;
}
.portfolio .container-fluid:hover [class^="p-section"]:hover {
  width: 76%;
}
<body class="portfolio">

  <div class="container-fluid">
    <div class="p-section1">
      <h1 class="text-center">Tytuł</h1>
    </div>
    <div class="p-section2">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section3">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section4">
      <h1 class="text-center">Tytuł</h1>
    </div>


  </div>


</body>

Upvotes: 2

Related Questions