Preserve Span when image is scaled

Question

I have list of news items with image, title and date. I want to scale image which I'm able to but it hides the span which has title.

I fixed this issue for Firefox by using -moz-transform-style: preserve-3d; but in other browsers I'm not able to find CSS property which can work with other browsers like IE, Chrome, Safari etc.

.list-w li {

    overflow:hidden;
    display: block;
    float: left;
    margin-bottom: 20px;
    margin-right: 15px;
    width: 315px;

}
    .list-w li img:hover {
      border: 0 none;
      float: left;
      margin: 0;
      width: 315px !important;
      transform: scale(1.05);
      z-index:10;
    }
    .title-span {
      -moz-transform-style: preserve-3d;
      z-index:100;
      color: #000;
      display: inline-block;
      float: left;
      font-size: 11px;
      font-weight: bold;
      height: 14px;
      margin: -24px 0 0;
      overflow: hidden;
      padding: 5px;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 305px;
    }

HTML

<div class="list-w">
  <ul>

    <li>
      <a style="text-decoration:none; border:0; display:block;" href="/en/" id="hylTopFour2_0">
        <img src=" http://placehold.it/350x150">
        <span class="title-span">This is the title of the news</span>
      </a>
    </li>
  </ul>
</div>

overflow: hidden is already there... i missed to mention it here — Learning, Jan 18 '16 at 10:48
@Learning if you use `overflow: hidden` it will be enough for all browsers like this [**JSFiddle**](https://jsfiddle.net/vivekkupadhyay/spts9z1n) — vivekkupadhyay, Jan 18 '16 at 10:54

score 1 · Accepted Answer · edited May 23 '17 at 11:52

Just add position: relative to the .title-span class

Codepen demo

Note:

1) transform-style: preserve-3d; isn't necessary here and is not the issue

2) The real issue here is that the span element has a negative top margin and is being painted below the image.This is due to the rules of stacking regarding non-positioned elements (spec)

In this case it's because inline-level elements (the image here) are painted above non-inline-level elements (the span here)

(see my answer here for more details about that)

3) Setting position: relative on the span causes it to appear on top of the image, because positioned elements are painted above inline-level, non-positioned elements

.list-w li {
  overflow: hidden;
  display: block;
  float: left;
  margin-bottom: 20px;
  margin-right: 15px;
  width: 315px;
}
.list-w li img:hover {
  border: 0 none;
  float: left;
  margin: 0;
  width: 315px !important;
  transform: scale(1.05);
  z-index: 10;
}
.title-span {
  -moz-transform-style: preserve-3d;
  z-index: 100;
  color: #000;
  display: inline-block;
  float: left;
  font-size: 11px;
  font-weight: bold;
  height: 14px;
  margin: -24px 0 0;
  position: relative;
  overflow: hidden;
  padding: 5px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 305px;
}

<div class="list-w">
  <ul>

    <li>
      <a style="text-decoration:none; border:0; display:block;" href="/en/" id="hylTopFour2_0">
        <img src=" http://placehold.it/350x150">
        <span class="title-span">This is the title of the news</span>
      </a>
    </li>


  </ul>
</div>

You got it right, Missing `position:relative` solved the issue. You gave a very good explanation. I was trying to get around it by using `z-index` property which was not going to work ... — Learning, Jan 18 '16 at 11:50

Preserve Span when image is scaled

1 Answers1

Codepen demo