反应，在列上悬停效果，使元素在悬停时出现

Question

我将在下面发布代码，我遇到的问题是我要尝试使鼠标悬停在列上时标题，副标题和按钮将可见，一开始它具有一类隐藏的因为我正在使用useState Hooks，但是我希望隐藏其中的元素，然后当我将鼠标悬停在要显示文本的列上时，当前我当前的代码将其弄乱了，非常有帮助。

如果有人觉得他需要另一种查看我的代码的方式，请链接到github：https://github.com/tigerabrodi/My-Portfolio

Projects.js

import React, {useState} from 'react';
import {Link} from "react-router-dom";
import "./Projects.css";


const projects = [
    {
        title: "My Portfolio",
        technology: "React/Bulma",
        imageUrl: "https://wallpaperplay.com/walls/full/b/9/6/74908.jpg",
        link: "www.google.com",
        id: 1
    }, {
        title: "My Portfolio",
        technology: "React/Bulma",
        imageUrl: "https://wallpaperplay.com/walls/full/b/9/6/74908.jpg",
        link: "www.google.com",
        id: 2
    }, {
        title: "My Portfolio",
        technology: "React/Bulma",
        imageUrl: "https://wallpaperplay.com/walls/full/b/9/6/74908.jpg",
        link: "www.google.com",
        id: 3
    }, 
    {
        title: "My Portfolio",
        technology: "React/Bulma",
        imageUrl: "https://wallpaperplay.com/walls/full/b/9/6/74908.jpg",
        link: "www.google.com",
        id: 4
    }
];

const projectStyle = i => ({
    backgroundImage: "url(" + projects[i].imageUrl + ")"
});


const Projects = () => {

    const [title, setTitle] = useState("hidden");
    const [subtitle, setSubtitle] = useState("hidden");
    const [button, setButton] = useState("hidden");

    const onHover = () => {
    setTitle("title has-text-primary has-text-centered is-spaced has-text-weight-bold");
    setSubtitle("subtitle has-text-primary has-text-centered is-spaced has-text-weight-medium");
    setButton("button is-centered is-primary is-outlined is-rounded")
}


    return (
        <div className="columns projects is-variable is-centered is-multiline is-mobile is-2">
            {projects.map((project, i) => (
                <div key={project.id} className="column is-one-quarter-desktop is-two-fifths-tablet is-half-mobile">
                    <div onMouseOver={onHover} class="inside-div" style={projectStyle(i)}>
                        <h1
                            className={title}>
                            {project.title}
                        </h1>
                        <h2
                            className={subtitle}>
                            {project.technology}
                        </h2>
                        <Link
                            className={button}
                            exact
                            to={project.link}>Visit
                        </Link>
                    </div>
                </div>
            ))}
        </div>
    );
}

export default Projects;

Projects.css

.inside-div {
    box-shadow: .01rem .01rem .5rem black;
    transition: all .5s;
}


.projects .title {
    font-family: cursive;
    text-shadow: 0.01rem 0.01rem 0.5rem black;
}

.projects .subtitle {
    font-family: cursive;
    text-shadow: 0.01rem 0.01rem 0.5rem black;
}

.projects .button {
    transition: all 0.4s;
    height:30px; 
    width:100px; 
    margin: -10px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

.hidden {
    visibility: hidden;
}

.inside-div:hover {
    transform: translate(0rem, -.8rem) scale(1.1, 1.1);
}

.projects .button:hover {
    transform: translate(0rem, -.5rem);
}