Mat Som Mat Som - 9 months ago 42
HTML Question

Center div over an img

I'm having problems positioning my div centrally containing a text over an image.



.event-list img {
display: block;
width: 100%;
}

.description {
position: absolute;
display: inline-block;
color: #FFF;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
}

.card {
background-color: #FFF;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-style: solid;
border-width: 5px;
border-color: #FFF;
margin-top: 1.5em;
}

<div class="card">
<div class="event-list">
<img src="https://unsplash.it/860/356?random=1" alt="banner" />
<div class="description">
<h3 class="event-title"> Event Title 1</h3>
<p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
<button class="button-primary"> Register </button>
<button class="button-primary"> Learn More </button>
</div>
</div>
</div>

<div class="card">
<div class="event-list">
<img src="https://unsplash.it/860/356?random=2" alt="banner" />
<div class="description">
<h3 class="event-title"> Event Title 2</h3>
<p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
<button class="button-primary"> Register </button>
<button class="button-primary"> Learn More </button>
</div>
</div>
</div>





jsfiddle

I'm trying to achieve each image with their own text description. The text is overlapped and unresponsive (it works on large screen)

Thanks in advance

Answer Source

set position relative to .event-list

.event-list {
  position:relative;
}

.event-list img {
  display: block;
  width: 100%;
}

.description {
  position: absolute;
  display: inline-block;
  color: #FFF;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}
.description h3 {
  margin-top: 0;
}

.card {
  background-color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-style: solid;
  border-width: 5px;
  border-color: #FFF;
  margin-top: 1.5em;
}
.event-list {
  position:relative;
}
<div class="card">
  <div class="event-list">
    <img src="https://unsplash.it/860/356?random=1" alt="banner" />
    <div class="description">
      <h3 class="event-title"> Event Title 1</h3>
      <p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
      <button class="button-primary"> Register </button>
      <button class="button-primary"> Learn More </button>
    </div>
  </div>
</div>

<div class="card">
  <div class="event-list">
    <img src="https://unsplash.it/860/356?random=2" alt="banner" />
    <div class="description">
      <h3 class="event-title"> Event Title 2</h3>
      <p class="event-info"> Date: DD/MM/YYYY Time: HH:mm </p>
      <button class="button-primary"> Register </button>
      <button class="button-primary"> Learn More </button>
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download