1
私は必死にこれを理解しようとしています。私は昨日、ここにいる人たちの助けを借りて、本当に感謝してどこかに行ってきましたが、何らかの理由で私の移行財産がうまくいかないように働いています。下に示すように人物の画像の上にマウスを置くことができるようにするには、その下にあるテキスト（そこにあるはずです）が全員のページの中央上部に表示されます。各人の背後に別の中心のテキストがあるはずです。CSSトランジション
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="meet.css">
<h1>Meet the Team</h1>
</head>
<body>
<div id="joe" class="info">
<h5>Joe Bloggs</h5>
<div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" />
<p class="hovercontent">Test paragraph</p>
</div>
</div>
<div id="john" class="info">
<h5>John Smith</h5>
<div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" />
<p class="hovercontent">Test paragraph</p>
</div>
</div>
<div id="jane" class="info">
<h5>Jane Doe</h5>
<div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" />
<p class="hovercontent">Test paragraph</p>
</div>
</div>
<div id="joe" class="info">
<h5>Joe Bloggs</h5>
<div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" />
<p class="hovercontent">Test paragraph</p>
</div>
</div>
<div id="john" class="info">
<h5>John Smith</h5>
<div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" />
<p class="hovercontent">Test paragraph</p>
</div>
</div>
<div id="jane" class="info">
<h5>Jane Doe</h5>
<div class="hoverinfo"> <img class="hover" src="DefaultProfile.png" border="0" />
<p class="hovercontent">Test paragraph</p>
</div>
</div>
</body>
</html>
CSS
.info {
display: inline-block;
width: 32%;
height: 375px;
margin-top: 5px;
text-align: center;
background: #FFFFFF;
}
.info h5 {
display: block;
background: white;
margin: 0;
}
.hovercontent {
opacity: 0;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hoverinfo:hover .hovercontent {
opacity: 1;
transition: all .5s ease-in;
}
.hoverinfo:hover .hover {
opacity: 0;
transition: all .5s ease-out;
}
私は実際にそれが働いて取得するかどうかはわかりません。また、理想的には、私ができるならば、私は3人の行にページを保ちたいと思うし、私はイメージのサイズを変更したくありません。
ここでも、任意のヘルプははるかに高く評価されます。
おかげ
結果をどのように正確に記述するかについて、さらに詳しく説明してください。その一部は現在、非常にあいまいです...ここ – arkascha