I would like to add an opacity on the clip-path/clip (the area covered by the clip path) like the picture shown below.
Below is my code for the same
.item--clip .demo {
width: 200px;
height: 250px;
}
.item--clip .has-mask {
position: absolute;
clip: rect(10px, 190px, 190px, 10px);
}
/* Common ------------------------------------------- */
.item {
position: relative;
margin-bottom: 2em;
padding-bottom: 2em;
padding-right: 3em;
border-bottom: 1px solid #DDD;
/* counter-increment: mylist; */
}
.item::before {
/* // content: counter(mylist); */
position: absolute;
right: 0;
top: 0;
font: 2rem/1 Georgia, serif;
color: #EEE;
}
.item::after {
content: '';
display: table;
width: 100%;
}
.demo {
position: relative;
float: left;
margin-right: 30px;
}
.demo::before {
content: '';
display: block;
position: absolute;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
transition: .7s;
}
.text {
padding-left: 230px;
}
.item:hover ::before {
opacity: .4;
}
<div class="wrapper">
<div class="item item--clip">
<div class="demo">
<img src="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" class="has-mask" />
</div>
</div>
</div>
This is the purpose of mask:
img {
width: 200px;
height: 250px;
-webkit-mask:
/* X Y / wwidth height */
linear-gradient(#000 0 0) 10px 10px/170px 170px, /* control the clipped part here*/
linear-gradient(rgba(0,0,0,0.4) 0 0); /* control the opacity here */
-webkit-mask-repeat:no-repeat;
}
<img src="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" />
Try using the "opacity" command:
.item - clip .has-mask {
position: absolute;
clip: rect (10px, 190px, 190px, 10px);
opacity: 0.5; / * 50% opacity * /
}
Related
I'm trying to replicate the styling of this animation but I don't know how to "fill in" the background color of the intersection of these two shapes. In the animation, the intersection is conveniently stepwise and stops where the edge of the square intersections with the origin of the circle; I can imagine using a clipping-mask to fill in that quadrant of the circle. However, is it possible to do the same more dynamically? Can you fill in the background of two intersecting shapes (while still having a transparent background otherwhere)?
.shape-interconnected {
width: 400px;
height: 300px;
position: relative;
background-color: black;
color: white;
margin: 1rem;
border-radius: 4px;
}
.shape-interconnected > .square, .shape-interconnected > .circle {
width: 50px;
height: 50px;
position: absolute;
border: 5px solid white;
transform: translate(-50%, -50%);
}
.shape-interconnected > .square {
border-radius: 4px;
top: 45%;
left: 55%;
}
.shape-interconnected > .circle {
border-radius: 50%;
top: 55%;
left: 45%;
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
You can recreate the dribble using html with a little css pseudo and animation magic.
This example below works at any set css variable set size border defined in the root css vars.
:root {
--size: 250px;
--border: 5px;
}
The trick in my example is by using positioning as percentages, meaning the parent .shape-interconnected controlled by the css var size, dictates all the child and child pseudo element position.
There is a lot of css to explain here, I've added comments in css, see if this inspires you to get you where you need to go...
Here is a fiddle... https://jsfiddle.net/joshmoto/378Lcgp0/
/* our root css vars */
:root {
--size: 250px;
--border: 5px;
}
BODY {
background: black;
min-height: 100%;
}
/* reset our box sizing on psuedo elems */
*, ::after, ::before {
box-sizing: border-box;
}
/* our shape intersect container positioned center of window */
/* this can be positioned where ever you want */
.shape-interconnected {
background: black;
width: var(--size);
height: var(--size);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: shape-interconnected 2s infinite;
}
/* animate height and width equally */
#keyframes shape-interconnected {
0% {
width: var(--size);
height: var(--size);
}
50% {
width: calc(var(--size) * 0.6);
height: calc(var(--size) * 0.6);
}
100% {
width: var(--size);
height: var(--size);
}
}
/* our square calculated at 40% of parent */
/* position and overflow hidden are key, hiding pseudo child elems */
.shape-interconnected > .square {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
background: transparent;
position: absolute;
overflow: hidden;
right: 0;
top: 0;
}
/* our square before pseudo elem emulating inner white filled circle */
/* position absolute with animation keyframes */
.shape-interconnected > .square::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
position: absolute;
animation: circle-interconnected 2s infinite;
}
/* start top/right 150% away, overflowing out of view */
/* 50% keyframe top/right 50% away, in view */
#keyframes circle-interconnected {
0% {
top: 150%;
right: 150%;
}
50% {
top: 50%;
right: 50%;
}
100% {
top: 150%;
right: 150%;
}
}
/* our square after pseudo elem emulating white border */
.shape-interconnected > .square::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
position: relative;
}
/* our circle calculated at 40% of parent */
.shape-interconnected > .circle {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
position: absolute;
bottom: 0;
left: 0;
}
/* our circle after pseudo elem emulating white border */
.shape-interconnected > .circle::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
border-radius: 50%;
position: relative;
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
Here is another example using the same code above but with these css root var settings...
:root {
--size: 500px;
--border: 2px;
}
Live example below...
/* our root css vars */
:root {
--size: 500px;
--border: 2px;
}
BODY {
background: black;
min-height: 100%;
}
/* reset our box sizing on psuedo elems */
*, ::after, ::before {
box-sizing: border-box;
}
/* our shape intersect container positioned center of window */
/* this can be positioned where ever you want */
.shape-interconnected {
background: black;
width: var(--size);
height: var(--size);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: shape-interconnected 2s infinite;
}
/* animate height and width equally */
#keyframes shape-interconnected {
0% {
width: var(--size);
height: var(--size);
}
50% {
width: calc(var(--size) * 0.6);
height: calc(var(--size) * 0.6);
}
100% {
width: var(--size);
height: var(--size);
}
}
/* our square calculated at 40% of parent */
/* position and overflow hidden are key, hiding pseudo child elems */
.shape-interconnected > .square {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
background: transparent;
position: absolute;
overflow: hidden;
right: 0;
top: 0;
}
/* our square before pseudo elem emulating inner white filled circle */
/* position absolute with animation keyframes */
.shape-interconnected > .square::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
position: absolute;
animation: circle-interconnected 2s infinite;
}
/* start top/right 150% away, overflowing out of view */
/* 50% keyframe top/right 50% away, in view */
#keyframes circle-interconnected {
0% {
top: 150%;
right: 150%;
}
50% {
top: 50%;
right: 50%;
}
100% {
top: 150%;
right: 150%;
}
}
/* our square after pseudo elem emulating white border */
.shape-interconnected > .square::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
position: relative;
}
/* our circle calculated at 40% of parent */
.shape-interconnected > .circle {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
position: absolute;
bottom: 0;
left: 0;
}
/* our circle after pseudo elem emulating white border */
.shape-interconnected > .circle::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
border-radius: 50%;
position: relative;
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
You might add a white circle inside the square and position it to the same coords the transparent one has.
Set overflow: hidden to the square to hide the outside part of the white circle:
.shape-interconnected {
width: 400px;
height: 300px;
position: relative;
background-color: black;
color: white;
margin: 1rem;
border-radius: 4px;
--animation-props: 1s alternate linear infinite;
}
.shape-interconnected>.square,
.shape-interconnected>.square:before,
.shape-interconnected>.circle {
width: 50px;
height: 50px;
position: absolute;
border: 5px solid white;
transform: translate(-50%, -50%)
}
.shape-interconnected>.square {
top: 35%;
left: 65%;
border-radius: 4px;
overflow: hidden;
animation: for_square var(--animation-props);
}
.shape-interconnected>.circle {
top: 65%;
left: 35%;
border-radius: 50%;
animation: for_transparent_circle var(--animation-props);
}
.shape-interconnected>.square:before {
content: '';
border-radius: 50%;
background: #fff;
top: 230%;
left: -190%;
animation: for_white_circle var(--animation-props);
}
#keyframes for_square {
to {
top: 50%;
left: 55%;
}
}
#keyframes for_transparent_circle {
to {
top: 55%;
left: 50%;
}
}
#keyframes for_white_circle {
to {
top: 80%;
left: 10%;
}
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 5 years ago.
I have this project:
https://jsfiddle.net/3xw9aqew/
When a user hovers over the grey box, a red overlay appears with a green border/outline. However this border is applied to the overlay which has an opacity value applied to it on hover.
.image-container:hover .overlay {
opacity: 0.3;
}
I want the overlay to be translucent, allowing the image below to be seen, but I want the border around this to be solid so its a standard "green" colour. This is the CSS for the overlay:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: red;
border:10px solid green;
box-sizing:border-box;
}
How can i achieve this?
For the intended behaviour, apply the required transparency directly to the background-color property value instead of the containing element as a whole. This can be done by adjusting the rgba value as demonstrated in the embedded code snippet below.
opacity applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, the
element and its children all have the same opacity relative to the
element's background, even if they have different opacities relative
to one another.
opacity - CSS | MDN
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
background-color: transparent;
border: 10px solid transparent;
box-sizing: border-box;
}
.image-container:hover .overlay {
background-color: rgba(255, 0, 0, 0.3);
border: 10px solid green;
}
Updated JSFiddle
Code Snippet Demonstration:
var imgContainer = document.getElementById("imgContainer");
var lorem = document.querySelector(".hdr-left");
var ipsum = document.querySelector(".hdr-right");
//When clicking on imgContainer toggle between class to change colour and position
imgContainer.addEventListener('click', function() {
lorem.classList.toggle("hdr-color-white");
ipsum.classList.toggle("hdr-color-white");
lorem.classList.toggle('hdr-left-middle');
ipsum.classList.toggle('hdr-right-middle');
});
body {
max-width: 100%;
overflow-x: hidden;
background: yellow;
font-family: sans-serif;
}
.container {
width: 85%;
max-width: 700px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img {
width: 100%;
max-width: 920px;
}
p {
font-size: 18px;
color: blue;
font-weight: bold
}
p.left {
position: absolute;
top: 0;
bottom: 0px;
right: -32%;
transform: rotate(-90deg);
}
p.right {
position: absolute;
top: 0;
bottom: 0;
left: -32%;
transform: rotate(90deg);
}
h2 {
font-size: 5em;
position: absolute;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
margin: 0;
z-index: 5;
color: blue;
transition: all 0.5s ease-in-out;
}
.hdr-color-white {
color: white;
}
.hdr-left {
left: -12%;
top: -35%;
}
.hdr-left-middle {
left: 7%;
top: 40%;
}
.hdr-right {
right: -10%;
top: 110%;
}
.hdr-right-middle {
right: 7%;
top: 40%;
}
/*Hovers*/
.container:hover {
cursor: pointer
}
.container:hover>p {
color: red;
}
.container .image-container:hover {}
/*Hovers Ends*/
/*Overlay*/
.image-container {
position: relative;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.image {
display: block;
width: 100%;
height: auto;
outline: 5px solid blue;
}
.container .image-container:hover>.image {
outline: none;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
background-color: transparent;
border: 10px solid transparent;
box-sizing: border-box;
}
.image-container:hover .overlay {
background-color: rgba(255, 0, 0, 0.3);
border: 10px solid green;
}
/*Overlay Ends*/
<div class="container">
<!--Rotated Text-->
<p class="right">Harolds</p>
<p class="left">Harolds</p>
<!--//Rotated Text-->
<h2 class="hdr-left hdr-color" id="lorem">Lorem</h2>
<div class="image-container" id="imgContainer">
<img src="http://via.placeholder.com/980x550" alt="gucci" class="image">
<!--colour overlay-->
<div class="overlay"></div>
<!--//colour overlay-->
</div>
<h2 class="hdr-right hdr-color" id="ipsum">Ipsum</h2>
</div>
I'd like some help to integrate a design made on sketch 2 years ago ! The goal is to do a beautiful orderer list but I have difficulties to integrate the content.
This is what i've done so far :
HTML :
<div class="stepbar_block">
<ol class="stepbar_list">
<li class="stepbar_list_elem_active"> 50% </li>
<li class="stepbar_list_item">60% </li>
<li class="stepbar_list_item">70%</li>
<li class="stepbar_list_elem_current">80%</li>
<li class="stepbar_list_item">90%</li>
</ol>
</div>
CSS :
.stepbar_block {
margin: 0;
padding: 0;
counter-reset: step;
position: relative;
margin-top: 40px;
}
.stepbar_block:before {
width: 1px;
height :10px;
background-color : rgba(87,87,86,0.3);
content : '';
position : absolute;
left : 30px;
top : -4px;
}
.stepbar_block:after {
width: 1px;
height :10px;
background-color : rgba(87,87,86,0.3);
content : '';
position : absolute;
right : 30px;
top : -4px;
}
.stepbar_list li {
list-style-type: none;
float: left;
width: 20%;
height : 5px;
position: relative;
font-family: Roboto;
font-size: 10px;
line-height: 11px;
text-align: center;
color: rgba(87,87,86,0.5);
}
.stepbar_list:after {
content: '';
position: absolute;
height: 1px;
background-color: rgba(87,87,86,0.3);
left: 30px;
right: 30px;
z-index: 3;
}
.stepbar_list li:before {
content : '';
counter-increment: step;
width: 5px;
height: 5px;
border: 1px solid black;
display: block;
background-color : black;
border-radius: 40px;
text-align: center;
margin: -2px auto 10px auto;
}
.stepbar_list_item:after {
content: counter(step);
position: absolute;
top: -25px;
background-color: white;
left: 0;
right: 0;
color: rgba(87,87,86,0.5);
font-size: 10px;
line-height: 11px; text-align: center;
}
.stepbar_list_elem_active:after {
content: counter(step);
position: absolute;
top: -25px;
background-color: red;
left: 0;
right: 0;
}
.stepbar_list_elem_current:after {
content: counter(step);
position: absolute;
top: -25px;
background-color: blue;
left: 0;
right: 0;
}
https://jsfiddle.net/zawt9hL6/
However I'm able to colorise the items but not the circles, so I'd like to know what is missing because when I play with :before and :after it seems to colorize the whole list item and not a specific content
That is the result i'd like to have
It is possible to have a render like this ? Moreover it's a gradiant background on the circles..
THank you for advices
Use something like this for all.
.stepbar_list_elem_active:before {
width: 10px;
height: 10px;
background-color: #fff;
content: '';
position: absolute;
left: 0;
top: -6px;
border: 2px solid red;
border-radius: 50%;
right: 0;
margin: 0 auto;
}
You can use :before and :after pseudo elements to create that circle with gradient. First you can create just regular circle with gradient and then add one more white circle with other pseudo-element on top of the frist one.
10* {
box-sizing: border-box;
}
ul {
display: inline-flex;
list-style: none;
position: relative;
padding: 0;
margin: 0 50px;
}
ul:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: gray;
}
li {
padding: 25px;
position: relative;
}
li:after,
li.color:before {
position: absolute;
content: '';
bottom: 0;
left: 50%;
height: 10px;
width: 10px;
background: gray;
border-radius: 50%;
transform: translate(-50%, 40%);
z-index: 1;
}
li.color:after {
width: 20px;
height: 20px;
transform: translate(-50%, 9px);
}
li.color:before {
background: white;
z-index: 2;
width: 10px;
height: 10px;
}
li.yellow:after {
background: linear-gradient(to right, rgba(240,184,88,1) 0%, rgba(230,139,60,1) 38%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
}
li.blue:after {
background: linear-gradient(to right, rgba(52,163,247,1) 0%, rgba(52,163,247,1) 32%, rgba(19,100,158,1) 71%, rgba(19,100,158,1) 100%);
}
.yellow {
color: #ED4620;
}
.blue {
color: #64A3D1;
}
<ul>
<li>1</li>
<li class="color yellow">2</li>
<li class="color blue">3</li>
<li>4</li>
</ul>
Right now I'm doing this to animate an element background color.
<style>
.container{
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
}
.element div {
position: absolute;
top: -20px;
left: 0;
background-color: #0c0;
transition:top 0.5s ease;
}
.element:hover div {
top: 0px;
transition:top 0.5s ease;
}
</style>
<div class="container">
<div class="element">some text<div>some text</div></div>
</div>
JsFiddle demo.
Is there any "cleaner" way to have the same animation? Right now I'm duplicating my content to achieve this.
You can use pseudo elements for this, and not have to duplicate any content:
It's basically moving one pseudo from above the element, and bringing it down over the element on the hover
div {
position: relative;
display: inline-block;
overflow: hidden;
}
div:before,
div:after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
z-index: -1;
}
div:before {
top: 0;
background: red;
}
div:after {
top: -100%;
background: green;
}
div:hover:before {
top: 100%;
}
div:hover:after {
top: 0;
}
<div>Text? Why would you ever want text?</div>
If you want the text to 'move' as well, you can do something similar:
div {
position: relative;
display: inline-block;
overflow: hidden;
height:20px;
width:300px;
}
div:before,
div:after {
content: attr(data-text);
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
z-index: -1;
}
div:before {
top: 0;
background: red;
}
div:after {
top: -100%;
background: green;
}
div:hover:before {
top: 100%;
}
div:hover:after {
top: 0;
}
<div data-text="Text? Why would you ever want text?"></div>
Note: canIuse suggests it is widely supported (bit I admit only tested in latest chrome, so only going by this for cross browser). However, This may affect SEO, and so I would be reluctant to use this in production.
If you just wanted the 'upper' element to flow over the top of the text (instead of 'lower' text scrolling as well), You could do:
div {
position: relative;
display: inline-block;
overflow: hidden;
height: 20px;
width: 300px;
background: red;
}
div:before {
content: attr(data-text);
position: absolute;
left: 0;
height: 100%;
width: 100%;
transition: all 0.6s;
top: -100%;
background: green;
}
div:hover:before {
top: 0;
}
<div data-text="The text I always wanted">The text I always wanted</div>
You could do it with background-position
Set a linear-gradient to 50% of each of the background colors and set the background size to be 200% of the actual div.
Then animate it and move the background 100% up. Like this:
.container {
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #c00 50%, #0c0 50%);
}
.element:hover {
background-position: 0 -100%;
transition: background-position 1s;
}
<div class="container">
<div class="element">some text</div>
</div>
This cuts out the need for any duplicate content in either the css or the html.
Yes, you can use pseudo element :before and get the text with attribute like:
<div class="container">
<div class="element" data-text="some text">some text</div>
</div>
And css:
.container{
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
overflow: hidden;
}
.element:before {
content: attr(data-text);
position: absolute;
top: -20px;
left: 0;
background-color: #0c0;
transition:top 0.5s ease;
}
.element:hover:before {
top: 0px;
transition:top 0.5s ease;
}
http://jsfiddle.net/Pik_at/g3Lxrou4/3/
just similar to jbutler483, but using just a single pseudo class. FIDDLE
.container {
padding: 30px;
}
.element {
position: relative;
font-size: 20px;
line-height: 20px;
background-color: #c00;
display: inline-block;
transition: top 0.5s ease;
overflow: hidden;
}
.element:after {
position: absolute;
top: -60px;
content: 'some text';
font-size: 20px;
line-height: 20px;
left: 0;
display: inline-block;
background-color: #0c0;
transition: top 0.5s ease;
}
.element:hover:after {
top: 0px;
}
<div class="element">some text</div>
Is there any way I can make the content/images none-transparent when inside a <div> that has a transparency?
Here's the HTML:
<div id="main-button-wrapper" class="left">
<div id="button-bg-layer" class="box-bg-layer corners"></div>
<div class="buttons-bg-overlay box-bg-overlay corners">
<img alt="Test" src="http://www.schroff.co.uk/railway/src/symbol_test.gif" />
</div>
</div>
CSS:
#main-button-wrapper {
height: 319px;
margin-left: 22px;
position: relative;
width: 321px;
}
#button-bg-layer {
position: absolute;
right: 0;
height: 319px;
width: 321px;
}
.buttons-bg-overlay {
position: relative;
right: 0;
margin: 11px;
height: 66px;
width: 299px;
text-align: center;
padding-top: 26px;
}
#buttons-wrapper {
position: relative;
width: 299px;
height: 297px;
z-index: 3;
margin: 22px;
}
/* Background Layers */
.box-bg-layer {
background-color: #010101;
z-index: 1;
zoom: 1;
filter: alpha(opacity=40);
opacity: 0.4;
}
.box-bg-overlay {
background-color: #010101;
z-index: 2;
zoom: 1;
filter: alpha(opacity=40);
opacity: 0.4;
}
I've tried putting a z-index: 4; on the image. The only other way I can think of is setting the div backgrounds as absolute positioning, then positioning the content outside of the div but there must be an easier way?
Any help would be much appreciated!
See JSFiddle:
http://jsfiddle.net/Sa8jw/
Instead of using opacity use rgba where a stands for alpha. This will make the child elements non transparent...
background-color: rgba(0,0,0,.5); /* RGBA for #010101 will be rgba(1,1,1,.4) */
Where .4 for a is equivalent to opacity: 0.4
Demo
Here's a js fiddle for your help :-)
FIDDLE
and the changed code . where the opacity is being added to pseudo class after
#main-button-wrapper {
height: 319px;
margin-left: 22px;
position: relative;
width: 321px;
}
#button-bg-layer {
position: absolute;
right: 0;
height: 319px;
width: 321px;
}
.buttons-bg-overlay {
position: relative;
right: 0;
margin: 11px;
height: 66px;
width: 299px;
text-align: center;
padding-top: 26px;
}
#buttons-wrapper {
position: relative;
width: 299px;
height: 297px;
z-index: 3;
margin: 22px;
}
/* Background Layers */
.box-bg-layer{
background-color: #010101;
z-index: 1;
zoom: 1;}
.box-bg-layer : after{
filter: alpha(opacity=40);
opacity: 0.4;
}
.box-bg-overlay { background-color: red;
z-index: 2;
zoom: 1;
}
.box-bg-overlay :after{
filter: alpha(opacity=40);
opacity: 0.4;
}