Как сделать так, чтобы текст отображался рядом с моей картинкой, когда я нажимаю на нее?

Question

Я пытаюсь отобразить абзац текста рядом с каждым изображением после его выбора. В настоящее время все, что у меня есть, - это изображение, которое появляется после того, как я нажимаю на него. Я не знаю, как добавить текст рядом с изображением, которое появляется только при нажатии на него. Я новичок в программировании, поэтому все может помочь. Если вам нужна дополнительная информация, дайте мне знать. Спасибо.

function myFunction(imgs) {
   var expandImg = document.getElementById("expandedImg");
   var imgText = document.getElementById("imgtext");
   expandImg.src = imgs.src;
   imgText.innerHTML = imgs.alt;
   expandImg.parentElement.style.display = "block";
}

@font-face {
    font-family: 'futuralight';
    src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'tekoregular';
    src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'playfair_displayregular';
    src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'poppinsmedium';
    src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  * {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
  
  .topnav {
    background-color: rgb(84, 104, 217);
    overflow: hidden;
    font-family: 'futuralight';
    font-weight: 900;
  }
  
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 20px 21px;
    text-decoration: none;
    font-size: 19px;
    position: relative;
    left: 2%;
  }
  
  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 6px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }
  
  .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }
  
  .topnav a.active-menu:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 6px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s;
  }
  .column {
    float: left;
    width: 25%;
    padding: 10px;
  }
  
  /* Style the images inside the grid */
  .column img {
    opacity: 0.85; 
    cursor: pointer; 
  }
  
  .column img:hover {
    opacity: 1;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* The expanding image container */
  .container {
    position: relative;
    display: none;
    width:50%;
  }
  
  /* Expanding image text */
  #imgtext {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: white;
    font-size: 20px;
  }
  
  /* Closable button inside the expanded image */
  .closebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 35px;
    cursor: pointer;
  }
  .row{
    position: absolute;
    top:600px;
  }
  .testtext{
    color:black;
    background-color: grey;
  }

Answer 1

Внес несколько изменений и дополнений. Вот расширенное изображение с разделом абзаца рядом с ним:

Новый блок развернутого изображения с боковым абзацем:

  <div id="expanded-wrapper">
    <div class="container">
      <span onclick="this.parentElement.style.display='none'"
        class="closebtn">&times;</span>
      <img id="expandedImg" style="width:100%">
      <div id="imgtext"></div>
    </div>
    <div id="img-paragraph">
      <p>image paragraph content goes here</p>
    </div>
  </div>

Плюс некоторые изменения и дополнения к CSS.

См. Отрывок для полной информации.

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  var imgParagraph = document.getElementById('img-paragraph');
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  
  // use 'display:table-cell' to keep elements side-by-side
  expandImg.parentElement.style.display = "table-cell";
  imgParagraph.style.display = 'table-cell';
}

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.topnav {
  background-color: rgb(84, 104, 217);
  overflow: hidden;
  font-family: 'futuralight';
  font-weight: 900;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 21px;
  text-decoration: none;
  font-size: 19px;
  position: relative;
  left: 2%;
}

.topnav a:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

.topnav a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.topnav a.active-menu:before {
  content: "";
  position: absolute;
  width: 84%;
  height: 2px;
  bottom: 6px;
  left: 8%;
  background-color: white;
  visibility: visible;
  transform: scaleX(1);
  transition: all 0.3s ease-in-out 0s;
}

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.85;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container {
  position: relative;
  display: none;
  width: 50%;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}


/* image paragraph */

#img-paragraph {
  display: none;
  width: 30%;
  outline: 1px solid red;
  padding: 0.5rem;
  vertical-align: top;
  text-align: left;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

.row {
  position: absolute;
  top: 600px;
}

Answer 2

Сначала убедитесь, что изображение не занимает все пространство внутри контейнера, удалив его ширину 100%:

<img id="expandedImg" style="width:100%">

измените на:

<img id="expandedImg">

Затем вы можете установить другую ширину для вашего изображения внутри css и удалите абсолютное позиционирование из текста.

У вас есть множество опций, чтобы они отображались рядом, но для обтекания текста вокруг изображений вы можете использовать поплавки.

Также не забудьте изменить цвет текста, так как он не будет виден белым на белом фоне.

Окончательный css для изображения и текста:

#imgtext {
  color: black;
  font-size: 20px;
  float:left;
}
#expandedImg{
  float:left;
  width:50%;
}