CODEWITHSUNDEEP
javascripthtmlcss
Alessia
Alessia

Reputation: 59

How can i put a button on an image?

I would like to put a button "add" on photos. Like in this photo enter image description here

<div class="row">
        <div th:each="photo : ${photos}" class="col-md-4">
            <div class="thumbnail">
                <img th:src="${photo.path}" style="width: 100%">
                <div class="caption">
                    <p>
                        <button th:class=".add-to-cart"
                            th:onclick="'addPhotoToOrder(' + ${photo.id} + ')'"
                            type="button" class="btn btn-primary" th:text="#{message.add}"></button>
                    </p>

But this is my result: enter image description here

Upvotes: 0

Views: 185

Answers (3)

Tandiiss
Tandiiss

Reputation: 1

You can use these HTML and CSS code to add a button on an image.

<body>
    <div class="container">
        <img src="photo-1556924784-f02bd5b5b094.jpg">
        <button class="btn">Button</button>
    </div>
</body>

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

.container img {
    width: 100%;
    height: auto;
  }

.container .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }

.container .btn:hover {
   background-color: Red;
  }

Upvotes: 0

muka.gergely
muka.gergely

Reputation: 8329

You can try these ways (flex and absolute positioning):

.container {
  display: flex;
}

.btn-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
}

.btn-container button {
  height: 15px;
}

.container2 {
  position: relative;
  width: 300px;
  overflow: hidden;
}

.btn-container2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateY(50%);
}

.btn-container2 button {
  display: block;
  margin: auto;
}
<div class="container">
  <img src="https://via.placeholder.com/300">
  <div class="btn-container">
    <button>Button</button>
  </div>
</div>
<br />
<hr />
<br />
<div class="container2">
  <img src="https://via.placeholder.com/300">
  <div class="btn-container2">
    <button>Button</button>
  </div>
</div>

FLEX PROs

Actually flex is better, because it puts it in the center (exactly), while with absolute positioning the button container's top is put in the center vertically (so not its middle point) - you can meddle with that (like top: calc(50% - 7.5px); (in the case if the button is 15px high), or something like that, but flex solves it out of the box.

FLEX CONs

Flexbox can still cause problems in different browsers (like adding a 1px "border", or other problems). This may cause your layout to change unexpectedly.

Upvotes: 1

Pablo
Pablo

Reputation: 560

use absolute position

    position:absolute;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;

Upvotes: 0

Related Questions