css - 如何在悬停时使顶部弹性框行不向下推底部弹性框行

Question

我已经阅读了类似的问题，但没有看到一个有效的例子。使用 absolute 将使所有图像堆叠在一起。我的目标是，当顶行中的图像在悬停时大小增加时，它不会下推底行上的图像。谢谢！

这是代码：

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%;
}

标签： cssflexbox

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>