詳細情報リンクを画像の中に入れてクリックすると画像の説明を表示したい画像領域その中のユーザーホバーマウスは詳細オプションを表示する必要があります
画像の中に「more info」リンクを追加して画像サイズ内のコンテンツを表示する方法
。 
ユーザがより多くの情報を選択すると、説明が画像内に正常に戻っ
とを表示されたときに画像の外側クリック。
<div class="content">
<img id="adj" src="images/Chrysanthemum.jpg" alt="Chrysanthemum" width="300" height="200">
<a href="#">more info</a>
</div>`
私は画像の右下隅に詳細情報を追加したいと考えています。
はトリックを行うためにいくつかのCSSを使用してお手伝いします：
を（しかし、それは代わりに、それはホバーでだ、クリックではありません）
div {
position: relative;
float: left;
}
div:hover a {
display: block;
}
img {
position: relative;
}
a {
right: 10px;
position: absolute;
bottom: 10px;
display: none;
color: #ffffff;
text-decoration: none;
font-family: cursive;
}
a:hover + span,
span:hover {
display: block;
}
span {
top: 10px;
position: absolute;
display: none;
left: 10px;
padding: 10px;
height: calc(100% - 40px);
width: calc(100% - 40px);
background: rgba(255, 255, 255, 0.7);
overflow: auto;
font-family: sans-serif;
}<div class="content">
<img id="adj" src="http://placekitten.com/133/120" alt="Chrysanthemum">
<a href="#">more info</a>
<span>Lorem ipsum dolor sit amet</span>
</div>
<div class="content">
<img id="adj" src="http://placekitten.com/200/120" alt="Chrysanthemum">
<a href="#">more info</a>
<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
</div>
<div class="content">
<img id="adj" src="http://placekitten.com/133/120" alt="Chrysanthemum">
<a href="#">more info</a>
<span>litr, sed diam nonumy eirmod tempor invidunt ut labore et </span>
</div>
<div class="content">
<img id="adj" src="http://placekitten.com/333/120" alt="Chrysanthemum">
<a href="#">more info</a>
<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
</div>
<div class="content">
<img id="adj" src="http://placekitten.com/133/120" alt="Chrysanthemum">
<a href="#">more info</a>
<span>Lorem ipsum dolor amet.</span>
</div>私は3x3グリッドで9枚の画像を持っています！私が位置を与えるとき：相対的な他のイメージはそれらの上に重なっている。 – JIMMY
投稿を 'float：left;'で編集しました。その後、それは動作します。 – Wavemaster
イメージのラッパー<div>を作成して、テキストとボタンをそのdivに入れることができます。
私はちょうど作られたこのjsFiddleを試してみて、多分それは
いつも**詳細**が表示されていても問題ありません。 – JIMMY
@ Wavemaster私は '
あなたの質問にリンクとテキストを含む画像のコード全体を追加してください。好ましくはスニペットで。 – Wavemaster