Html Question posted in
Some basic documentation can be found here.

Html – Ignore alignment with siblings when hovering

On my website, I am trying to make a list of tiles, each of which has an app:

body { background-color: gray; }

.tile {
  width: 200px;
  height: 250px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  border: 5px solid white;
  border-radius: 5px;
  background-color: white;
  margin: 50px;
  text-wrap: wrap;
}

.tile:hover {
  height: auto;
  /* Uncover description */
  scale: 105%;
  cursor: pointer;
}
<div class="tile">Tile 1</div>
<div class="tile">Tile 2</div>
<div class="tile">Tile 3</div>
<div class="tile">Tile 4</div>

When you hover over one of these divs, it expands and shows the description (which increases the height). However, when it does this, every other tile in the list jumps to match the new height/alignment. This is quite annoying and I would like that to not happen. How can I get the siblings of the single tile to ignore the alignment of said tile?

Tags:

2

Answers


  1. 0

    This is what you are trying to achieve

    1. Wrap all four divs in a parent div
    2. Give parent a class
    3. Set parent’s display display as flex and adjust properties
    body { background-color: gray; }

.parent {
    display: flex;
    flex-direction: row;
    align-items: start;
}

.tile {
  width: 200px;
  height: 250px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  border: 5px solid white;
  border-radius: 5px;
  background-color: white;
  margin: 50px;
  text-wrap: wrap;
}

.tile:hover {
  height: auto;
  /* Uncover description */
  scale: 105%;
  cursor: pointer;
}
    <div class="parent">
<div class="tile">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="tile">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="tile">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="tile">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
    Login or Signup to reply.
  2. 0

    If you use a flexbox and set align-items: start, then the other tiles in the same row won’t shift when you hover over a tile. However, tiles in subsequent rows will still shift down. Is this the effect you are looking for?

    body {
  margin: 50px;
  background-color: gray;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  align-items: start;
}

.tile {
  width: 200px;
  border: 5px solid white;
  border-radius: 5px;
  background-color: white;
  transition: 250ms;
  padding: 1em;
  box-sizing: border-box;
}

.tile > h4 {
  margin: 0;
}

.tile > p {
  display: none;
  margin-bottom: 0;
}

.tile:hover {
  cursor: pointer;
}

.tile:hover > p {
  display: block;
}
    <div class="tile">
  <h4>Tile 1</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus.</p>
</div>
<div class="tile">
  <h4>Tile 2</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus.</p>
</div>
<div class="tile">
  <h4>Tile 3</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus.</p>
</div>
<div class="tile">
  <h4>Tile 4</h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus.</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search