How to center a caption and pop up text on an image in html and css-CodePudding

I'm currently trying to code a website for the first time, and have run into the problem that when I'm trying to caption an image in a gallery and add a pop up info slide that it isn't centered under the image, but instead it is to the right of the image. The image should always have a caption, and when you scroll over the image a text box should go up, so that a description could be read. I'm not very sure how to fix the problem since I thought I had already centered the text. If anyone can help me I'll be very grateful.

    <div >
  <div >
    <img src="img/hi_bild.jpg" height="200px" width="200px">
    <figcaption> John Smith</figcaption>
    <div >
      <p>This is a cat</p>
      <span >ARROW IMG HERE</span>
    </div>
  </div>
  <div >
    <img src="img/hi_bild.jpg" height="200px" width="200px">
    <div >
      <p>This is a cat</p>
    </div>
  </div>
  <div >
    <img src="img/hi_bild.jpg" height="200px" width="200px">
    <div >
      <p>This is a cat</p>
    </div>
  </div>
</div>

https://jsfiddle.net/b0gdpmjw/

image with caption

image with caption and pop up description

CodePudding user response：

Position: Absolute; and flexbox structure, will do what you want.

https://www.w3schools.com/css/css3_flexbox.asp https://www.w3schools.com/css/css_positioning.asp

CodePudding user response：

the solution is to specify the position from left for .text.

(tipp: i think it is a good idea to start with bootstrap. with bootstrap you can build up the basic framework of a website relatively easy, so that it also works on the smartphone. afterwards you can customize everything yourself as you like. to build up the basic framework of a website yourself and make it responsive for different devices is very difficult as a beginner. so you run from one big problem into the next. latest when you start with media-queries, you can hardly keep track of it all.)

figcaption {
  color: white;
  font-style: oblique;
  position: relative;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.column1 {
  position: relative;
  width: 200px;
  height: 300px;
  overflow: hidden;
}

p {
  color: black; /* changed to black, so you can see the text */
  font: 25px Sulphur Point, sans-serif;
}

.text {
  position: absolute;
  bottom: 0;
  /* right: 0;*/
  left: 0; /* here */
  width: 200px;
  height: 0;
  text-align: center;
  transition: height 0.7s ease-out;
}

.column1:hover>.text {
  height: 150px;
}

.column1 {
  float: left;
  width: 33.33%;
  padding: 5px;
  margin-bottom: 50px;
}

/* Clearfix (clear floats) */
.row1::after {
  content: "";
  clear: both;
  display: table;
  margin-bottom: 50px;
}

<div >
  <div >
    <img src="img/hi_bild.jpg" height="200px" width="200px">
    <figcaption> John Smith</figcaption>
    <div >
      <p>This is a cat</p>
      <span >ARROW IMG HERE</span>
    </div>
  </div>
  <div >
    <img src="img/hi_bild.jpg" height="200px" width="200px">
    <div >
      <p>This is a cat</p>
    </div>
  </div>
  <div >
    <img src="img/hi_bild.jpg" height="200px" width="200px">
    <div >
      <p>This is a cat</p>
    </div>
  </div>
</div>