Vuetify - Hover card to expand: Other cards are not resizing

Question

I'm using Vuetify and creating custom expandable cards on hover. I'm trying to make the others be smaller when you hover on v-card but it's not working.

I'm using CSS only, here's the Codepen: https://codepen.io/fabiozanchi/pen/BeewPP

And here the code:

.custom-card-1,
.custom-card-2,
.custom-card-3,
.custom-card-4 {
  width: 23%;
  margin: 0 1%;
  position: relative;
  float: left;
  transition: 0.4s;
  height: 350px;
}

.custom-card-1:hover {
  width: 68%;
}

.custom-card-1:hover .custom-card-2,
.custom-card-1:hover .custom-card-3,
.custom-card-1:hover .custom-card-4 {
  width: 8%;
  transition: 0.4s;
}

.custom-card-1:hover .custom-card-2 .card-content,
.custom-card-1:hover .custom-card-3 .card-content,
.custom-card-1:hover .custom-card-4 .card-content {
  display: none;
}

<div id="app">
  <v-app id="inspire">
    <v-layout row wrap>
      <v-flex xs12>
        <v-card elevation-2 class="custom-card-1">
          <v-container fluid class="card-content">
            <v-layout row wrap text-xs-center>
              <v-flex xs12>
                <p class="subheading xs12">lorem Ipsum 1</p>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
        <v-card elevation-2 class="custom-card-2">
          <v-container fluid class="card-content">
            <v-layout row wrap text-xs-center>
              <v-flex xs12>
                <p class="subheading xs12">lorem Ipsum 2</p>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
        <v-card elevation-2 class="custom-card-3">
          <v-container fluid class="card-content">
            <v-layout row wrap text-xs-center>
              <v-flex xs12>
                <p class="subheading xs12">lorem Ipsum 3</p>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
        <v-card elevation-2 class="custom-card-4">
          <v-container fluid class="card-content">
            <v-layout row wrap text-xs-center>
              <v-flex xs12>
                <p class="subheading xs12">lorem Ipsum 4</p>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

Any idea how to make it work only with CSS?

Currently the cards are going to another row due to the percentage width.

Joykal Infotech Joykal Infotech · Accepted Answer · 2019-06-06T06:30:44

Just need little change in your CSS code. Your hover selector is a little bit wrong. It should be like .custom-card-1:hover ~ .custom-card-2 because custom-card-1 and custom-card-2 both are sibling elements. Check this Demo:

Vuetify - Hover card to expand: Other cards are not resizing

1 Answers