CODEWITHSUNDEEP
htmlcss
molkron
molkron

Reputation: 85

show button over image in responsive way without putting large amount of space below image

I have an html page which displays three images in a row and I need to place a button over each of them in a responsive way. I want the images to change in size and then be one above the other when the page width is reduced, but I want the button size to also reduce as image reduces in size and I want the button position to remain the same wrt the image.

I found that I needed to use relative positioning for the button but when I do that a large amount of extra space appears below an image. If I use absolute positioning this space doesn't appear but then the button no longer stays positioned on the image when the image size and/or position changes. Also I can't find a way to reduce the button size.

How can I prevent the extra white space appearing and ensure the button stays over the image and how can i make the button size change dynamically when page width is changed?

* {
  box-sizing: border-box;
}

.main {
  color: limegreen;
  background-color: lightsteelblue;
}

.row {
  width: 100%;
  display: block;
}

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

@media screen and (max-width: 800px) {
  .column {
    float: none;
    width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 360px) {
  .column {
    width: 95%;
  }
}


/* Clearfix (clear floats) */

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

.container {
  position: relative;
}


/* Style the button and place it at the bottom of the container/image */

.container .btn {
  position: relative;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -120%);
  -ms-transform: translate(-50%, -50%);
  background-color: transparent;
  color: white;
  font-size: 20px;
  font-weight: 700;
  padding: 12px 24px;
  border: solid white;
  cursor: pointer;
  border-radius: 5px;
}

.container .btn:hover {
  background-color: black;
}
<!DOCTYPE html>
<html>

<head>
  <link href="images.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="main row container">
    <div class="column">
      <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width: 100%" />
      <button class="btn">START TODAY</button>
    </div>
    <div class="column">
      <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width: 100%" />
    </div>
    <div class="column">
      <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width: 100%" />
    </div>
  </div>
</body>

</html>

Upvotes: 0

Views: 535

Answers (1)

Satish Modha
Satish Modha

Reputation: 777

i change some css structure in your code.maybe this can help

.main.row.container .column {
    overflow: hidden;
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    flex-wrap: wrap;
}

* {
  box-sizing: border-box;
}

.main {
  color: limegreen;
  background-color: lightsteelblue;
}

.row {
  width: 100%;
  display: block;
}

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

@media screen and (max-width: 800px) {
  .column {
    float: none;
    width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 360px) {
  .column {
    width: 95%;
  }
}


/* Clearfix (clear floats) */

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

.container {
  position: relative;
}


/* Style the button and place it at the bottom of the container/image */

.container .btn {
     position: absolute;
    color: white;
    font-size: 20px;
    font-weight: 700;
    padding: 12px 24px;
    border: solid white;
    cursor: pointer;
    border-radius: 5px;
      background-color: transparent;
}

.container .btn:hover {
  background-color: black;
}
<!DOCTYPE html>
<html>

<head>
  <link href="images.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="main row container">
    <div class="column">
      <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width: 100%" />
      <button class="btn">START TODAY</button>
    </div>
    <div class="column">
      <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width: 100%" />
    </div>
    <div class="column">
      <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width: 100%" />
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions