css hover effect height in list item-CodePudding

I only want the hovered element to be affected by its height. But all row items increase in height. What can i do to increase the height of the element that is just hovered ? (If there is a solution with javascript, it will be too)

HTML and CSS codes:

.names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.names div {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 16px 0;
  text-align: center;
}

.names div a {
  font-size: 16px;
  color: #25282e;
  text-decoration: none;
}

.names div a:hover {
  font-weight: 700;
}

.names div a:hover~img {
  display: block;
}

.names div img {
  width: 40px;
  margin-top: 16px;
  display: none;
}

<div >
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
</div>

CodePudding user response：

I'm not sure of the exact layout you want, but in general just add position: absolute to the images on hover. e.g.

.names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.names div {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 16px 0;
  text-align: center;
}

.names div a {
  font-size: 16px;
  color: #25282e;
  text-decoration: none;
}

.names div a:hover {
  font-weight: 700;
}

.names div a:hover~img {
  display: block;
  position: absolute;
  margin-top: 20px;
}

.names div img {
  width: 40px;
  margin-top: 16px;
  display: none;
}

<div >
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
</div>

To note I've also added margin-top: 20px just for stylistic purposes, it isn't required.

CodePudding user response：

One thing you can do is give your items height.

I edited the.names div selector by adding height:30px; for example

.names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.names div {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 16px 0;
  height:30px;
  text-align: center;
}

.names div a {
  font-size: 16px;
  color: #25282e;
  text-decoration: none;
}

.names div a:hover {
  font-weight: 700;
}

.names div a:hover~img {
  display: block;
}

.names div img {
  width: 40px;
  margin-top: 16px;
  display: none;
}

<div >
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
</div>

As you can see only the hovered item is affected in height.

You can give every item a bigger height so the image won't overlap:

.names {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.names div {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 16px 0;
  height:70px;
  text-align: center;
}

.names div a {
  font-size: 16px;
  color: #25282e;
  text-decoration: none;
}

.names div a:hover {
  font-weight: 700;
}

.names div a:hover~img {
  display: block;
}

.names div img {
  width: 40px;
  margin-top: 16px;
  display: none;
}

<div >
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
  <div><a  href="#">Name</a><img src="https://picsum.photos/seed/picsum/200/300"></div>
</div>