如何在React中将鼠标悬停在图像上时对文本应用基本过渡

Question

我有一个容器<div>，里面有3张图片

​

我在它们下面有3个<div>，其中包含一些文本，当相应的图像悬停在上面时，会显示如下内容：

​

​

这是我的代码，我正在使用React：

        <div className = "Page">
        <div className = "About">
            <h1 className = "Headerr-1">We at flower shop</h1>
            <h1 className = "Headerr-2">dedicate ourselves to providing you the best flowers for all occations</h1>

            <p className = "paragraph-1"> we use some of the best tools to fertilize our flowers so it can meet your every need</p>
            <p className = "paragraph-2" >here is some testimoney from our clients</p>


            <div className = " testimony-container">

                <img src = {Man} width = "400" height = "400" className = "man-img" />
                <img src = {Woman} width = "400" height = "400" className = "woman-img" />
                <img src = {Miles} width = "400" height = "400" className = "miles-img" />

                <div className = "man-text-container">
                    <p className = "man-p"> ''I was in dire need of a quick way to get my flowers
                        on time for my wedding day, I would like to thank Flower
                        Shop for their efforts on showing up in time.''</p>
                    <p className = "man-title">
                        -Melvin Jones
                    </p>
                </div>
                <div className = "woman-text-container">
                    <p className = "woman-p"> ''I needed some fresh picked flowers as a gift for my
                    grandmother's birthday, and a friend referenced flowershop to me. Suffice to say
                        I don't have any regrets!''
                    </p>
                    <p className = "woman-title">
                    -Vanessa Richardson 
                    </p>
                </div>
                <div className = "miles-text-container">
                    <p className = "miles-p"> ''An old friend of mine was sick and I was looking to
                    purchase some flowers as a gift and send it to the hospital where he was resting.
                    I thank Flower Shop for their beautifully picked flowers.''
                    </p>
                    <p className = "miles-title">
                    -Miles Edgeworth
                    </p>
                </div>
            </div>
        </div>
    </div>

我想做的是添加一个基本的过渡，以一种缓慢的方式显示文本。我试过使用opacity，但当我想让文本在悬停操作中淡入淡出时，文本开始以一种奇怪的方式向屏幕移动。

对此最好的方法是什么？

Answer 1

使用opacity对我来说效果很好：

.man-text-container, 
.miles-text-container, 
.woman-text-container {
    opacity:0;
    transition: opacity 300ms ease-in-out;
    -webkit-transition: opacity 300ms ease-in-out;  
    -moz-transition: opacity 300ms ease-in-out;
}

.man-img:hover~.man-text-container, 
.woman-img:hover~.woman-text-container, 
.miles-img:hover~.miles-text-container {
    opacity: 1;
}

你的CSS是什么样子的？