Display button in the same position of the image on click

Question

Wanted to know if a button can be displayed in the same position as the image.

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

<div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>

How can Image and text be displayed ina table format

Answer 1

I didn't really understand what you wanted, but I did it from the picture.

The code is wrong in my opinion you can read about gridd css so that in the future you can do it correctly css grid.

Or the cssportal website can help css-flexbox-generator/

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}
img {
  width: 100%;
  height: 19rem;
}
button {  
  width: fit-content;
  margin: 4rem auto 0rem auto;
  background-color: #447bad;
  border-style: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 100%;
  padding: 10px 21px;
}

<div class="grid-container">
  <div class="grid-item">
    <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
  </div>
  <div class="grid-item">
    <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
  </div>
  <div class="grid-item">
    <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
  </div>
  <div class="grid-item">
    <button style="background: #4CAF4F;">Green</button>
    <button>Blue</button>
  </div>
  <div class="grid-item"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt=""></div>
  <div class="grid-item">
    <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
  </div>
</div>

The second method, click the image disappears, the buttons appear.

let child1 = document.querySelector("#child1");
child1.onclick = function () {
    document.querySelector("#child1 > img").style.display = "none";
    document.querySelector("#child1 > .btn-click").style.display = "block";
};

.grid-container {
  display: flex;
  grid-template-columns: auto auto auto;
}
.btn-click{
  display:none;
}
img {
  width: 100%;
  height: 19rem;
}
button {  
  width: fit-content;
  margin: 4rem auto 0rem auto;
  background-color: #447bad;
  border-style: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 100%;
  padding: 10px 21px;
}
.grid-item{
  width: 33%;
}

<div class="grid-container">
  <div class="grid-item" id="child1">
    <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
    <div class="btn-click">
      <button style="background: #4CAF4F;">Green</button>
      <button>Blue </button>
    </div>
  </div> 
  <div class="grid-item">
    <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
  </div>
  <div class="grid-item">
    <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
  </div>  
</div>

The code is not responsive.

Answer 2

if you mean you want the button be inside the picture here what it is

img {
position : relitive ;
}
button {
position : absolute ;
top : 0;
left : 0;
}

I dont know where is your button tag if it is inside your div class:"colume" get it out of there

Answer 3

I would go about it with flexbox usage rather than float. Check out the Codepen I setup with an example in it ->

https://codepen.io/martin_f/pen/vYdYPNp

-EDIT to include relevant code here-

With flexbox usage you can go about making use of flex-direction / justify-content / align-items CSS rules to get the effect you want here ->

.row {
  display: inline-flex;
  width: 100%;
}

.column,
.column-btn {
  display: flex;
  margin-right: 1rem;
  width: 300px;
}

.column img {
  max-width: 300px;
}

.column-btn {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.column-btn button {
  margin-bottom: 2rem;
  width: 10rem;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.column-btn button:hover {
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.column-btn button.blue-btn {
  background-color: #008cba;
}

.column-btn button.green-btn {
  background-color: #4caf50;
}

<div class="row">
  <div class="column">
    <img src="https://images.unsplash.com/photo-1483921020237-2ff51e8e4b22?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Mountains" style="width:100%">
  </div>
</div>

<div class="row">
  <div class="column-btn">
    <button class="green-btn">Green</button>
    <button class="blue-btn">Blue</button>
  </div>
  <div class="column">
    <img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Mountains" style="width:100%">
  </div>
</div>

And you end up with something like ->