Display button in the same position of the image on click

Issue

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

enter image description here

enter image description here

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

enter image description here

How can Image and text be displayed ina table format

Solution

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.

Answered By – Sergiu

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.