如何將影像并排制作，并在下方添加完整的并排照片的描述？-有解無憂

如何將影像并排制作，并在下方添加完整的并排照片的描述？

我想做這個——當你將滑鼠懸停在每張圖片上時，文字是不同的。這是公司的bios。這讓我發瘋了。似乎文本不在影像中 CSS 做不到？是唯一的解決方案 javascript？抱歉，如果這是一個愚蠢的問題，我是自學成才的，可能和我們這里的大多數人一樣 :)

我嘗試過 flex、div、lists，但似乎如果文本與照片不同，CSS 不會讓我這樣做？（我已經使代碼超級簡單來描述這個想法）

如果我做

<div id="headshot-row">
<div id="headshot-1">headshot1</div>
<div id="headshot-2">headshot2</div>
<div id="headshot-3">headshot3</div>
<div id="headshot-4">headshot4</div>
</div>

<div id="bios">
<div id="bio-1">bio1</div>
<div id="bio-2">bio2</div>
<div id="bio-3">bio3</div>
<div id="bio-4">bio4</div>
</div>

我想

#headshot-row {
margin: 0 auto;
display: flex;
justify-content: space-around;
}

#bios {
margin: 0 auto;
display: none;
}

#headshot-1:hover #bio-1 {
display: block
}

uj5u.com熱心網友回復：

您可以通過對 HTML 結構稍作更改的 CSS 來做到這一點——影像需要與 bios 有某種關系，如果影像和 bios 元素是兄弟元素，則可以實作這一點。

此代碼段說明了用于演示目的的各個懸停條件。您可以通過使用它的 [...] 工具來縮短 CSS 中的內容，例如查找開始 bio- 的 id，或者您可以只使用 CSS nth-child。

該片段還使用網格只是因為它更適合二維布局。

.container {
  display: flex;
  justify-content: center;
}

#headshot {
  display: grid;
  gap: 5vw;
  grid-template-columns: repeat(4, 1fr);
}

#headshot>* {
  background: black;
  width: 100%;
  height: 100%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

#bios {
  grid-column: 1 / span 4;
}

#bios>* {
  display: none;
}

#headshot-1:hover~#bios #bio-1 {
  display: block;
}

#headshot-2:hover~#bios #bio-2 {
  display: block;
}

#headshot-3:hover~#bios #bio-3 {
  display: block;
}

#headshot-4:hover~#bios #bio-4 {
  display: block;
}

<div id="headshot">
  <div id="headshot-1">headshot1</div>
  <div id="headshot-2">headshot2</div>
  <div id="headshot-3">headshot3</div>
  <div id="headshot-4">headshot4</div>

  <div id="bios">
    <div id="bio-1">bio1</div>
    <div id="bio-2">bio2</div>
    <div id="bio-3">bio3</div>
    <div id="bio-4">bio4</div>
  </div>

uj5u.com熱心網友回復：

.wrapper {
  position: relative;
}

.wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.wrapper span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  background: red;
  color: white;
  
  opacity: 0;
  transition: opacity 350ms ease;
}

.wrapper:hover span {
  opacity: 1;
}

<div class="wrapper">
  <img src="https://via.placeholder.com/350x150" />
  <span>Text</span>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/532092.html

標籤：htmlcss图片隐藏

上一篇：HTML卡和影像互不相愛

下一篇：無法在vuejs中將來自api的資料作為imgsrc插入