如何使顶部的弹性框行在悬停时不推倒底部的弹性框行？

Question

我读过类似的问题，但一直没有看到一个有效的例子。使用绝对值会使所有的图片叠加在一起。我的目标是，当最上面一行的图像在悬停时尺寸增大时，它不会推倒最下面一行的图像。谢谢你

这是我的代码。

import React, {Component} from 'react';
import { NavButton } from '../../atoms/NavButton/NavButton';
import './homepage.css';

export default class Homepage extends Component{

  render () {

    const { history } = this.props;

    return (
      <div className="homepage-outer-flexbox">
        <div className="homepage-row-one">
          <NavButton 
            icon="timeline"
            history={history}
          />
          <NavButton 
            icon="me" 
            history={history}
          />
          <NavButton 
            icon="learn" 
            history={history}
          />
        </div>
        <div className="homepage-row-two">
          <NavButton 
            icon="meta" 
            history={history}
          />
          <NavButton 
            icon="projects" 
            history={history}
          />
          <NavButton 
            icon="education" 
            history={history}
          />
        </div>
      </div>
    );
  }
}

.homepage-outer-flexbox { 
    display: flex;
    flex-direction: column;
}

.homepage-row-one {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.homepage-row-two {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.container {
    text-align: center;
    vertical-align: middle;
    margin-bottom: 20%;
}

.container > img {
    max-width: 65%;
    max-height: 65%;
}

.container > img:hover { 
    max-width: 70%;
    max-height: 70%;
}

Answer 1

你可以试试这个。

.container > img:hover { 
    transform: scale(1.1); /* Or something*/
}

例子。

.img-container {
  display: flex;
  align-items: center;
}

.img-container>img {
  min-width: 0;
  width: 100%;
  transition: .4s ease;
}

.img-container>img:hover {
  transform: scale(1.1);
  /* Or something*/
}

<div class="img-container">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
  <img src="https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg">
</div>