How to make images side by side with a description underneath that takes the full length of the side-CodePudding

I want to make this - when you hover over each image, the text is different. it's for company bios. this has been driving me insane. it seems if text is in not in the image CSS can't do it? is the only solution javascript? sorry if this is a silly question, I am self-taught, probably like most of us here :)

I have tried flex, div, lists, but it seems that if the text is in a different than the photos, CSS won't let me do it? (I've made the code super simple to portray the idea)

if I do

<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>

I would like

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

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

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

CodePudding user response：

.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 >
  <img src="https://via.placeholder.com/350x150" />
  <span>Text</span>
</div>

CodePudding user response：

You can do this with CSS with a slight change to the HTML structure - the images need to have some sort of relationship with the bios and this can be achieved if the images and the bios element are siblings.

This snippet spells out the individual hover conditions for demo purposes. You could shorten things in the CSS by using its [...] facilities to look for e.g. ids starting bio-, or you could just use CSS nth-child.

The snippet also uses grid just because that is more suited to 2dimensional layouts.

.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>