z-index not working with relative position

Question

i have created a fiddle for the problem (But they want me to post code here as well :/). I want the "hero" div to be at the top of another (overlap) on hover. But it is shifting the other ones, i gave it a high z-index and relative positioning, still nothing. Also can anybody tell me how to remove linear gradient from the div's background property on hover without specifying the background again in :hover.

.holder {
  margin-top: 10vh;
  margin-left: 10vw;
  width: 90vw;
  height: 90vh;
  position: relative !important;
  z-index: 0;
}

.hero {
  height: 100%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 20%;
  display: inline-block;
  z-index: 0;
  position: relative !important;
}

#first {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg');
}

#second {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg');
}

#third {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg');
}

#fourth {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg');
}

.hero:hover {
  z-index: 1000 !important;
  width: 27vw;
  cursor: pointer;
}

<div class="holder">
  <div class="hero" id="first"></div>
  <div class="hero" id="second"></div>
  <div class="hero" id="third"></div>
  <div class="hero" id="fourth"></div>
</div>

https://jsfiddle.net/aks30498/8waty2m9/27/

Temani Afif · Accepted Answer · 2018-07-12T10:05:49.270

Gradient and image are set using the same property which is background so you cannot deal with this using z-index. You can change the background-size in order to hide the gradient on hover. Then you can rely on scale transform to make the image bigger and overlap the other:

I have removed the unnecessary code

.holder {
  margin-top: 10vh;
  margin-left: 10vw;
  width: 90vw;
  height: 90vh;
}

.hero {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 20%;
  display: inline-block;
}

#first {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg');
}

#second {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg');
}

#third {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg');
}

#fourth {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg');
}

.hero:hover {
  background-size: 0 0, cover;
  transform:scale(1.4);
  cursor: pointer;
}

<div class="holder">
  <div class="hero" id="first">

  </div>
  <div class="hero" id="second">

  </div>
  <div class="hero" id="third">

  </div>
  <div class="hero" id="fourth">

  </div>
</div>

hey! thanx :) btw can u tell me why do i have those white gaps between the images ? — akshay sharma, Jul 12 '18 at 12:40
@akshaysharma That's because you used display inline-block https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements — Pascal Goldbach, Jul 12 '18 at 13:01

Pascal Goldbach · Answer 2 · 2018-07-12T13:06:23.440

Temani Afif's solution is really good, but I'll add some additional informations :

I want the "hero" div to be at the top of another (overlap) on hover. But it is shifting the other ones

position : relative doesn't "detach" the element from the parent element, only position:absolute and position:fixed does it, so you have 2 options :

Options 1

Use position: absolute on your .hero class, I would not recommend this solution because you have to set the property left on each hero (and on the :hover for better results), it's not a clean solution, but I'll show you what I mean :

.holder{
  margin-top:10vh;
  margin-left: 10vw;
  width:90vw;
  height:90vh;
  position : relative;
}
.hero{
  height:100%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width:20%;
  display:inline-block;
  position:absolute;
  transition: transform .2s, z-index 0.2s;
  z-index: 0;
}

#first{
background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg');
left : 0%
}
#second{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg');
left : 20%
}
#third{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg');
left : 40%
}
#fourth{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg');
left : 60%
}

.hero:hover{
  cursor:pointer;
  width: 27vw;
  z-index: 1000;
}

<div class="holder">
  <div class="hero" id="first">
  
  </div>
  <div class="hero" id="second">
  
  </div>
  <div class="hero" id="third">
  
  </div>
  <div class="hero" id="fourth">
  
  </div>
</div>

As you can see, there's no shifting anymore, but as I said don't use this solution.

Option 2

Use the solution of Temani Afif (his solution uses transform:scale(1.4); on the hover)

Note : If you want to animate the transform property you need to also animate the z-index property for better results (If you omit the z-index you'll get a weird overlapping issue), in that case you have to set position:relative on the hero class :

.holder{
  margin-top:10vh;
  margin-left: 10vw;
  width:90vw;
  height:90vh;
}
.hero{
  height:100%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width:20%;
  display:inline-block;
  position:relative;
  transition: transform .2s, z-index 0.2s;
  z-index: 0;
}

#first{
background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg');
}
#second{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg');
}
#third{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg');
}
#fourth{
   background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg');
}

.hero:hover{
  cursor:pointer;
  transform: scale(1.5);
  z-index: 1000;
}

<div class="holder">
  <div class="hero" id="first">
  
  </div>
  <div class="hero" id="second">
  
  </div>
  <div class="hero" id="third">
  
  </div>
  <div class="hero" id="fourth">
  
  </div>
</div>

On this fiddle you can try the difference : https://jsfiddle.net/8waty2m9/73/

Top : with z-index
Bottom : without z-index

thanks :) and yeah i was going to try something lyk the option 1 after this attempt... u saved my tym XD that zoom effect using z index actually crops the image a bit, right? — akshay sharma, Jul 12 '18 at 12:43
@akshaysharma Here you can compare the results with and without z-index: https://jsfiddle.net/8waty2m9/73/ try to hover between each hero and you'll see that some transitions aren't so good (example Spiderman to cpt. America, or Deadpool to Batman) With z-index it looks better imo — Pascal Goldbach, Jul 12 '18 at 12:57
@PaschalGoldbach Thanx! using z-index really gives a better transition effect ^_^ — akshay sharma, Jul 12 '18 at 18:24

z-index not working with relative position

2 Answers2