3

I am creating a portfolio page to display some images. I used the CSS3 transition to expand out the thumbnail to a full size image when you hover over it but the other thumbs stay in front of the expanded element. I tried using a z-index to force them to the back but it is not working. Is there a way to bring a transition element to the top layer when expanded? Here is a stripped down version of the code I made. When you hover over the red box I want the green box to stay behind the expanded red.

CSS:

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.grow1{
    background: red;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 50px;
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s;
    z-index: 1;
    }
.grow1:hover{
    background-size: contain;
    width:150px;
    height:70px;
    z-index: 2;
}
.grow2{
    background: green;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 50px;
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s;
    z-index: 1;
    }
.grow2:hover{
    background-size: contain;
    width:150px;
    height:70px;
    z-index: 2;
}

HTML:

<div class="row">
    <div class="col-4"></div>
    <div class="col-2">
        <div class="grow1"></div>
    </div>
    <div class="col-2">
        <div class="grow2"></div>
    </div>
    <div class="col-4"></div>

Here's the Fiddle link too: https://jsfiddle.net/timmyll/8nef4v88/1/

Thanks!

Improve this question

3 Answers 3

Reset to default
3

That is possible with z-index, but it will only work with absolute positioned elements. Add position: absolute; to both boxes and use .grow1:hover, .grow2:hover { z-index: 5; } to bring the hovered box to the front.

When your mouse leaves the first box, the second one will be in front of the first one while the transition is still running though. I can't think of a pure CSS workaround to avoid that.

Improve this answer
3
  • That worked for my page. I did have trouble with additional images inside the column stacking on top of each other after adding the absolute code. I was able to fix it by placing those images into their own rows in the same column. Thanks.
    – timmyll
    Commented May 31, 2015 at 0:20
  • You're welcome! Did you have the problem that elements get behind each other when your mouse leaves the element?
    – redelschaap
    Commented May 31, 2015 at 7:05
  • I didn't have problems at first. My z-indexes were a little off so the elements on the left stayed above the elements on the right but then the hover did not work for the right elements. Fixing that of course caused the first problem to occur. I can live with it.
    – timmyll
    Commented Jun 2, 2015 at 19:01
0

Try to add position: absolute; i have updated your code here its working you should add position's properties accordingly

i.e top: ?px left: ?px

.grow1{
    position: absolute;
    background: red;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 50px;
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s;
    z-index: 1;
    }
.grow1:hover{
    background-size: contain;
    width:150px;
    height:70px;
    z-index: 999;
}
.grow2{
    position: absolute;
    background: green;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 50px;
    -webkit-transition: width 1s, height 1s; 
    transition: width 1s, height 1s;
    z-index: 2;
    }
.grow2:hover{
    background-size: contain;
    width:150px;
    height:70px;
    z-index: 1;
}
Improve this answer
2
  • @timmyll resize your browser its working you need to position these divs
    – Bilal Maqsood
    Commented May 30, 2015 at 16:44
  • Your info was similar to the previous comment but it was helpful. Thanks.
    – timmyll
    Commented May 31, 2015 at 0:20
0

Add a transform and it will work

.grow1:hover{
    transform: translateZ(0px);
}

To preserve it working on the hover out, I have added a transition: transform.

And to show that the second element also works, and I have done in it a translateX

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.grow1{
	background: red;
	background-size: contain;
	background-repeat: no-repeat;
	width: 100px;
	height: 50px;
	-webkit-transition: width 1s, height 1s; 
	transition: width 1s, height 1s, transform 1s;
	z-index: 1;
	}
.grow1:hover{
	background-size: contain;
	width:150px;
	height:70px;
	z-index: 2;
    transform: translateZ(0px);
}
.grow2{
	background: green;
	background-size: contain;
	background-repeat: no-repeat;
	width: 100px;
	height: 50px;
	-webkit-transition: width 1s, height 1s; 
	transition: width 1s, height 1s, transform 1s;
	z-index: 1;
	}
.grow2:hover{
	background-size: contain;
	width:150px;
	height:70px;
	z-index: 2;
    transform: translateX(-50px);
}
<div class="row">
    <div class="col-4"></div>
    <div class="col-2">
        <div class="grow1"></div>
    </div>
    <div class="col-2">
        <div class="grow2"></div>
    </div>
    <div class="col-4"></div>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.