CODEWITHSUNDEEP
css
akshay sharma
akshay sharma

Reputation: 157

z-index not working with relative position

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/

Upvotes: 3

Views: 190

Answers (2)

Pascal Goldbach
Pascal Goldbach

Reputation: 1007

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

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272947

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>

Upvotes: 2

Related Questions