:after element with rotate moving on resize - html

Question

I have a :before and an :after element (for shadow purposes) with a transform: rotate applied to it. The :before stays in place when the viewport is resized, however the :after moves slightly up and down. If the rotate is removed, it stays in place on resize. How can I make it stay in place on resize with the roate?
I have put a z-index: 1 on the :before and :after for visibility of the issue
It's the shadow #3
http://codepen.io/mildrenben/details/jEYpyP/
HTML:
<h2>Shadow #3</h2>
<div class="row shadow-3">
<div class="shadow-box">
<img>
</div>
<div class="shadow-box">
<img>
</div>
<div class="shadow-box">
<img>
</div>
<div class="shadow-box">
<img>
</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
}
.row {
height: 160px;
width: 80%;
margin: 0 auto 60px;
display: block;
img:nth-of-type(1) {
content: url(http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg);
}
img:nth-of-type(2) {
content: url(http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg);
}
img:nth-of-type(3) {
content: url(http://cdn2.collective-evolution.com/assets/uploads/2014/08/life_in_space-728x400.jpg);
}
img:nth-of-type(4) {
content: url(http://s.ngm.com/2007/10/space-travel/img/space_feature.jpg);
}
}
img {
width: 23%;
margin: 0 1% 0 0;
height: 100%;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.shadow-box {
width: 23%;
margin: 0 1% 0 0;
height: 100%;
transition: all 0.2s ease-in-out;
cursor: pointer;
display: inline-block;
img {
width: 100%;
height: 100%;
&:hover {
transform: translateY(-4px);
}
}
}
.shadow-box:before, .shadow-box:after {
content: '';
z-index: 1;
position: absolute;
width: 8%;
height: 110px;
background: red;
transform: skew(-10deg) rotate(-6deg) translate(calc(3% + 10px), 31px);
transition: all 0.2s ease-in-out;
}
.shadow-box:after {
transform: skew(10deg) rotate(6deg) translate(126%, -146px);
}
.shadow-box:hover:before, .shadow-box:hover:after {
box-shadow: 0 20px 20px lighten($black, 40%);
}

Answer 1

I don't think using translates is the way to go here, I'd set the container to position: relative; and then use absolute positioning to position the shadow things: http://jsfiddle.net/bpma9ko4/
Here the relevant parts:
.shadow-box {
width: 45%;
margin: 0 1% 0 0;
height: 100%;
transition: all 0.2s ease-in-out;
cursor: pointer;
display: inline-block;
position: relative;
}
.shadow-box:before, .shadow-box:after {
content: '';
z-index: 1;
position: absolute;
width: 40%;
height: 110px;
background: red;
transform: skew(-10deg) rotate(-6deg);
transition: all 0.2s ease-in-out;
top: 20px;
left: 20px;
}
.shadow-box:after {
transform: skew(10deg) rotate(6deg);
right: 20px;
left: auto;
}
In your example, when I removed the translates, the red box on the right went underneath the image (on a new line) and then you tried dragging it up with translates, but to me it is a much more direct way if you just place it over the image to begin with, using the top/left/right attributes.
Note: My example is simplified, it doesn't have shadows and other things, it's cut down to the parts relevant to the question.
The whole code:
html, body {
width: 100%;
height: 100%;
}
.row {
height: 160px;
width: 80%;
margin: 0 auto 60px;
display: block;
img:nth-of-type(1) {
content: url(http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg);
}
img:nth-of-type(2) {
content: url(http://i.dailymail.co.uk/i/pix/2014/09/04/1409790551890_wps_28_Astronaut_Reid_Wiseman_po.jpg);
}
img:nth-of-type(3) {
content: url(http://cdn2.collective-evolution.com/assets/uploads/2014/08/life_in_space-728x400.jpg);
}
img:nth-of-type(4) {
content: url(http://s.ngm.com/2007/10/space-travel/img/space_feature.jpg);
}
}
img {
width: 100%;
margin: 0 1% 0 0;
height: 100%;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.shadow-box {
width: 45%;
margin: 0 1% 0 0;
height: 100%;
transition: all 0.2s ease-in-out;
cursor: pointer;
display: inline-block;
position: relative;
}
.shadow-box:before, .shadow-box:after {
content: '';
z-index: 1;
position: absolute;
width: 40%;
height: 110px;
background: red;
transform: skew(-10deg) rotate(-6deg);
transition: all 0.2s ease-in-out;
top: 20px;
left: 20px;
}
.shadow-box:after {
transform: skew(10deg) rotate(6deg);
right: 20px;
left: auto;
}
.shadow-box:hover:before, .shadow-box:hover:after {
box-shadow: 0 20px 20px lighten($black, 40%);
}
<h2>Shadow #3</h2>
<div class="row shadow-3">
<div class="shadow-box">
<img src="http://placehold.it/466x180">
</div>
<div class="shadow-box">
<img src="http://placehold.it/466x180">
</div>
<div class="shadow-box">
<img src="http://placehold.it/466x180">
</div>
<div class="shadow-box">
<img src="http://placehold.it/466x180">
</div>
</div>