How to control position of profile element in parent element?

Question

I write a profile with HTML and CSS. I have problem when control the element to a position and send it to front.

I have a code like this:

/* profile custom */

.service-container {
    background: url('http://images.indianexpress.com/2016/05/love-autumn-tree_759_thinkstockphotos-177812216.jpg');
    height:500px;
    width: 400px;
}

.layer {
    background-color: rgba(0, 179, 0, 0.6);
    width: 100%;
    height: 100%;
}

figure.card-profile {
  font-family: roboto_regular;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(255, 255, 255);
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  width: 100%;
  color: #333;
  text-align: left;
}
figure.card-profile img {
  max-width: 100%;
  vertical-align: middle;
  border-style: solid;
  border-width: 6px;
  border-color: rgb(255, 255, 255);
  height: 90px;
  width: 90px;
  border-radius: 50%;
  margin: 40px 0 0 10px;
}
figure.card-profile p {
  display: block;
  border-radius: 0px;
  position: relative;
  color: #fafafa;
  padding: 25px 50px 30px 50px;
  font-size: 1.3em;
  font-weight: 500;
  margin: 0;
  line-height: 1.6em;
}

figure.card-profile .author {
  position: absolute;
  bottom: 45px;
  padding: 0 10px 0 120px;
  margin: 0;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}
figure.card-profile .author h5 {
  opacity: 0.8;
  margin: 0;
  font-weight: 800;
}
figure.card-profile .author h5 span {
  font-weight: 400;
  text-transform: none;
  padding-left: 5px;
}

figure.card-profile .img-content-card {
    position: absolute;
    top: 250px;
    left: 10%;
    z-index: 999
}

<div class="service-container">
  <div class="layer">
    <figure class="card-profile">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni eveniet voluptate fugit facere accusantium ipsum possimus quae nihil consequuntur saepe distinctio ad quaerat, laudantium deserunt facilis, odit perferendis eaque. Modi?
    </p>
      <div class="img-content-card">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample3.jpg" alt="sq-sample3" />
    <div class="author">
      <h5>Pelican Steve </h5>
      <span> Ceo, Psdfreebies.com</span>
    </div>
      </div>
  </figure>
  </div> <!-- / .layer -->
</div> <!-- service-container -->

I can't control img-content-card and send to the front of all element.

I want this show like this:

I tried set z-index: 999.

Answer 1

Remove overflow: hidden from figure.card-profile and it comes to the fore.

Please let me know you thoughts on this. Thanks!

/* profile custom */

.service-container {
    background: url('http://images.indianexpress.com/2016/05/love-autumn-tree_759_thinkstockphotos-177812216.jpg');
    height:500px;
    width: 400px;
}

.layer {
    background-color: rgba(0, 179, 0, 0.6);
    width: 100%;
    height: 100%;
}

figure.card-profile {
  font-family: roboto_regular;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(255, 255, 255);
  position: relative;
  float: left;
  /*overflow: hidden;*/
  margin: 10px 1%;
  width: 100%;
  color: #333;
  text-align: left;
}
figure.card-profile img {
  max-width: 100%;
  vertical-align: middle;
  border-style: solid;
  border-width: 6px;
  border-color: rgb(255, 255, 255);
  height: 90px;
  width: 90px;
  border-radius: 50%;
  margin: 40px 0 0 10px;
}
figure.card-profile p {
  display: block;
  border-radius: 0px;
  position: relative;
  color: #fafafa;
  padding: 25px 50px 30px 50px;
  font-size: 1.3em;
  font-weight: 500;
  margin: 0;
  line-height: 1.6em;
}

figure.card-profile .author {
  position: absolute;
  bottom: 45px;
  padding: 0 10px 0 120px;
  margin: 0;
  text-transform: uppercase;
  color: #ffffff;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
}
figure.card-profile .author h5 {
  opacity: 0.8;
  margin: 0;
  font-weight: 800;
}
figure.card-profile .author h5 span {
  font-weight: 400;
  text-transform: none;
  padding-left: 5px;
}

figure.card-profile .img-content-card {
    position: absolute;
    top: 250px;
    left: 10%;
    z-index: 999
}

<div class="service-container">
  <div class="layer">
    <figure class="card-profile">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni eveniet voluptate fugit facere accusantium ipsum possimus quae nihil consequuntur saepe distinctio ad quaerat, laudantium deserunt facilis, odit perferendis eaque. Modi?
    </p>
      <div class="img-content-card">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample3.jpg" alt="sq-sample3" />
    <div class="author">
      <h5>Pelican Steve </h5>
      <span> Ceo, Psdfreebies.com</span>
    </div>
      </div>
  </figure>
  </div> <!-- / .layer -->
</div> <!-- service-container -->