Text over image

Hi I’m trying to achieve this effect (text over image)

on ionic css showcase card, however the image won’t show.

This is what I got so far

Can anyone help me out? Thanks so much!

Hello vinceliao999,

Did you resolve the issue?
I’m facing the same problem here and I’m seeking for some help.

Greetings.

Did anyone solve this issue?

This effect is only with css.

<div class="imgbox txt-center-box">
  <h2>Skyscrapers</h2>
</div>
.imgbox {
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.6),
      rgba(0, 0, 0, 0.6)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg);
  background-size: cover;
  width: 300px;
  height: 200px;
  margin: 10px 0 0 10px;
  position: relative;
  float: left;
}

.txt-center-box h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 2rem;
  transform: translate(-50%, -50%);
}
1 Like