Reputation: 4274
Attempting to put a shadow on an image, and I need to put the :before or :after behind the parent in order to have it work. Any suggestions would be wonderful.
.g-w-a {
background-repeat: no-repeat;
display: block;
height: 240px;
position: absolute;
width: 160px;
background-color: rgba(255, 0, 0, 0.5);
}
.g-w-a::after {
background-color: rgba(0, 0, 0, 1);
content: "";
height: 20px;
left: 40px;
position: absolute;
top: 210px;
width: 50px;
z-index: -2;
}
<div style="background-image: url(http://static.soliaonline.com/a/ae4329867a01e99b6b8ddbeb3d1c6f03.png)" class="g-w-a"><div class="t-shad">Rasen</div></div>
https://jsfiddle.net/bunzons9/1/
Upvotes: 1
Views: 1123
Reputation: 2219
.g-w-a {
background-repeat: no-repeat;
display: block;
position:relative;
height: 240px;
width: 160px;
background-color: rgba(255, 0, 0, 0.5);
}
.g-w-a::after {
background-color: rgba(0, 0, 0, 1);
content: "";
height: 240px;
width: 160px;
left: 10px;
top: 10px;
position: absolute;
z-index: -2;
}
<div style="background-image: url(http://static.soliaonline.com/a/082b36bc93e690cfda70e57e7eb86dac.png)" class="g-w-a"><div class="t-shad">Rasen</div></div>
Upvotes: 2