Box shadow of the box falls on the sibling box. I can use z-index to fix it. However, if one of the boxes is translated (e.g. move a little bit up when mouse over), the shadow falls the sibling again. How to solve this? Thanks.
.container {
margin: 30px;
padding: 10px;
}
div.shadow {
height: 100px;
width: 100px;
background-color: #ff0;
float: left;
margin: 4px;
}
.shadow {
position: relative;
}
.shadow:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
box-shadow: 0px 10px 1000px #000;
}
.shadow:hover {
transform: translateY(-3px);
}
.shadow:hover::after {
box-shadow: 0px 20px 1500px #000;
}
<div class="container">
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</div>
When you use translate on parent, you create a new stacking context, that places the transformed .shadow element on top of it's siblings. To prevent that you can use other properties than transform (top: -3px for example):
.container {
margin: 30px;
padding: 10px;
}
.shadow {
position: relative;
height: 100px;
width: 100px;
background-color: #ff0;
float: left;
margin: 4px;
}
.shadow::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
box-shadow: 0px 10px 1000px #000;
}
.shadow:hover {
top: -3px;
}
.shadow:hover::after {
box-shadow: 0px 20px 1500px #000;
}
<div class="container">
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
</div>
Related
I have a basic knowledge on CSS. Below is the design I am trying to achieve. I am attaching a fiddle that I have been working on to achieve this.
As per below image I can see I can have two div and two hr tags; but not sure about the arrow on right and verticle line, circle on bottom and gray vertical box overlapping inner div.
FIDDLE that I am setting up.
<div id="main_content" >
<div id="container">
</div>
#main_content {
width: 400px;
min-height: 200px;
height: auto;
background-color: #000;
position: relative;
}
#container {
width: 360px;
height: 160px;
margin:auto;
padding: 10px;
background-color:#555;
top: 10%;
}
EDIT 1:
I came this far : Fiddle
So I provide a solution that 'draw' your expected result by using some absolute positioning referring to the #container. It as the advantage to be easier to make responsive and use only one wrapper:
body {
background: black;
padding: 50px;
}
#container {
position: relative;
display: flex;
width: 200px;
height: 180px;
padding: 10px;
border: 4px solid #c4c4c4;
color: #fff;
}
#arrows {
position: absolute;
top: -20px;
right: -20px;
display: flex;
flex-flow: column;
}
.arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #fff;
margin-top: 2px;
}
.left-line {
margin-left: 20px;
border: 0.1px solid #c4c4c4;
}
.top-lines {
position: absolute;
top: -15px;
left: -20px;
width: 100%;
}
.top-lines .line {
width: calc(100% + 20px);
}
.top-lines .line:nth-child(2) {
margin-top: 5px;
transform: translateX(-20px)
}
.line {
border-top: 1px solid #c4c4c4;
}
.line.left {
position: absolute;
top: -20px;
left: -10px;
border-left: 1px solid #c4c4c4;
height: 100%;
}
.circles {
position: absolute;
left: -25px;
bottom: -30px;
height: 50px;
width: 50px;
}
.circle {
height: 100%;
width: 100%;
border: 1px solid #c4c4c4;
border-radius: 50%;
}
.circles .circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circles .circle:nth-child(2) {
height: 70%;
width: 70%;
}
.transparent-rect {
position: absolute;
height: 60%;
width: 30px;
bottom: 25px;
left: -20px;
background-color: rgba(255, 255, 255, .2)
}
<div id="container">
<p>This is inner div</p>
<div class="top-lines">
<div class="line"></div>
<div class="line"></div>
</div>
<div class="line left"></div>
<div class="circles">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div id="arrows">
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
</div>
<div class="transparent-rect"></div>
</div>
Try this one I added the arrows to right. You would need more or less same steps to add other items to your HTML and CSS.
#main_content {
width: 400px;
min-height: 200px;
height: auto;
background-color: #000;
position: relative;
border-radius: 10px;
display: flex;
}
#container {
width: 360px;
height: 160px;
margin: auto;
padding: 10px;
background-color: #555;
top: 10%;
}
#arrow_div {
display: flex;
flex-flow: column;
}
#arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid gray;
}
<div id="main_content">
<div id="container">
</div>
<div id="arrow_div">
<div id="arrow">
</div>
<div id="arrow">
</div>
<div id="arrow">
</div>
</div>
</div>
Here it is ... ;-)
Short explanation
I reworked your structure and added an outer-styling-wrapper to have an anchor to position the styling elements.
Now I am able to move the styling by an absolute potioning to their place.
If you want to change the position now yu can do that just changing the positoning values. Values are calculate to the edges of the outer-styling-wrapper top|right|bottom|left.
Overview to structure:
<div id="element-wrapper">
<div id="outer-styling-wrapper">
<div id="content">
Add content here
</div>
<!-- styling elements: absolute position relative to outer-styling-wrapper -->
<div id="line-top1"></div>
<div id="line-top2"></div>
...
... more see example
</div>
</div>
READY STYLED ELEMENT
Please see comments in code to work with it ...
... AND ADAPT SIZES IN CSS TO YOUR NEEDS ;-)
/**********************************************
structure first
--> to align styling elements on structure
***********************************************/
#element-wrapper,
#element-wrapper * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#element-wrapper {
position: relative;
width: 400px;
padding: 30px;
background-color: #2b2b2b;
border-radius: 15px;
}
#outer-styling-wrapper {
position: relative;
/*
* padding values are for space arount content box to outer styling wrapper
* values depends on size of arrows / circles
* STYLING ANCHOR POINTS ARE
* --> top-right: upper right arrow
* --> bottom-left: outer circle
*/
padding-top: 27px;
padding-right: 25px;
padding-bottom: 20px;
padding-left: 13.3333333333px;
/*
* design-elements anchored to outer-styling-wrapper
* to see the edges where the elements are anchored
* just activate this class
border: 1px dotted red;
*/
}
#content {
height: 200px;
padding: 10px;
border: 4px solid #c4c4c4;
color: #fff;
}
/****************************************************
styling second
--> use structure as anchor for styling elements
*****************************************************/
/*** styling arrows ***/
#arrow-wrapper {
position: absolute;
/* anchor element to top-right edge of outer-styling-wrapper */
top: 0;
right: 0;
}
.arrow {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #fff;
margin-bottom: 10px;
}
/*** styling lines ***/
.lines {
background-color: #c4c4c4;
}
#line-top1 {
position: absolute;
/* anchor points:
calculate values from: top|right|left edge of outer styling box */
top: 10px;
right: 27px;
left: -10px;
height: 1px;
}
#line-top2 {
position: absolute;
/* anchor points:
calculate values from: top|right|left edge of outer styling box */
top: 20px;
right: 50px;
left: -20px;
height: 1px;
}
#line-right {
position: absolute;
/* anchor points:
calculate values from: top|bottom|left edge of outer styling box */
top: -7.5px;
bottom: 42px;
left: 5px;
width: 1px;
}
/*** styling pad ***/
#styling-pad {
position: absolute;
/* anchor points:
calculate values from: left|bottom edge of outer styling box */
left: 0px;
bottom: 55px;
width: 30px;
height: 35%;
background-color: rgba(196, 196, 196, 0.5);
}
/*** styling circles ***/
.styling-circles {
border: 1px solid #c4c4c4;
border-radius: 50%;
}
#styling-circle-outer {
position: absolute;
/* anchor points:
calculate values from: left|bottom edge of outer styling box */
left: 0;
bottom: 0;
width: 40px;
height: 40px;
/* center inner circle with flexbox*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#styling-circle-inner {
width: 30px;
height: 30px;
}
<div id="element-wrapper">
<div id="outer-styling-wrapper">
<!-- content box -->
<div id="content">
This is inner CONTENT div
</div><!-- #content -->
<!-- styling elements -->
<div id="line-top1" class="lines"></div>
<div id="line-top2" class="lines"></div>
<div id="line-right" class="lines"></div>
<div id="arrow-wrapper">
<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>
</div>
<div id="styling-pad"></div>
<div id="styling-circle-outer" class="styling-circles">
<div id="styling-circle-inner" class="styling-circles"></div>
</div>
</div><!-- #outer-styling-->
</div><!-- #element-wrapper -->
I have made a little pop up when I hover over a square but I want to go to this popup even with an existing margin.
Here is a snippet with my HTML and CSS code:
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: solid lightgrey;
position: relative;
}
.frame {
height: 100%;
}
.st {
height: 250px;
}
.info {
visibility: hidden;
position: absolute;
top: 0;
left: 120%;
margin-left: -5px;
border-radius: 5px;
border: solid black 1px;
color: white;
}
.vertical:hover .info {
visibility: visible;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="frame"></div>
<div class="info">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="st"></div>
<div class="arrow"></div>
</div>
</div>
Here is an example (if you don't follow the arrow the popup will close):
https://jsfiddle.net/bpez64fr/
I want to ignore the margin and allow the user to go to the popup and make it work as if there was no margin
My strategy would be to put the element to be shown on hover at left:100% so that there's no gap for the cursor to "fall in". You can then use padding on this element to create the visual whitespace between the main element and the hover element, and put the element's content in an inner element .info-inner in my example. Note that .info-inner must be position:relative for the positioning of the .arrow to work.
Let me know if this works for you.
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: solid lightgrey;
position: relative;
}
.frame {
height: 100%;
}
.st {
height: 250px;
}
.info {
visibility: hidden;
position: absolute;
top: 0;
left: 100%;
padding-left: 10px;
}
.info-inner {
border-radius: 5px;
border: solid black 1px;
color: white;
position: relative;
}
.vertical:hover .info {
visibility: visible;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(2, 0, 0, 0.75) transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="frame"></div>
<div class="info">
<div class="info-inner">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="st"></div>
<div class="arrow"></div>
</div>
</div>
</div>
There are several ways to do this but here is one example.
It simple positions the element next to the previous one without a gap.
.vertical {
height: 70px;
width: 70px;
border-radius: 5px;
margin-bottom: 10px;
margin-right: 10px;
border: 3px solid lightgrey;
position: relative;
}
.infoWrap {
opacity: 0;
position: absolute;
top: -3px;
left: 100%;
padding: 0 10px;
transition: all ease-in-out 0.2s;
}
.info {
position: relative;
background: #eee;
border: solid #aaa 1px;
border-radius: 5px;
color: #666;
width: 100%;
min-height: 53px;
padding: 10px;
}
.vertical:hover .infoWrap {
opacity: 1;
}
.arrow {
position: absolute;
right: 100%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #aaa transparent transparent;
top: 25px;
}
<div class="vertical">
<div class="infoWrap">
<div class="info">
<div class="header">
<div class="name">Hover</div>
</div>
<div class="arrow"></div>
</div>
</div>
</div>
You can use the css transitions property to delay the invisibility of the element.
Example:
.info{ transition: visibility 2s ease-out;}
Updated jsFiddle
In this latter example, I increased the distance to the pop-up to improve the demo:
UPDATED Updated jsFiddle
CSS transitions allow you to delay the advent/removal of a css modification to the DOM, giving the user time to slide the mouse from the box to the pop-up.
References:
https://css-tricks.com/almanac/properties/t/transition-delay/
https://www.w3schools.com/cssref/css3_pr_transition-delay.asp
I want to create something like the following screenshot, but I can't figure out any z-index value for which the shadow doesn't appear either over the first or second box (they are always stacked either with the first one on top, or the second).
Is there a way to achieve the following?
body { background: darkgrey; padding-top: 50px}
div { background: white; width: 200px; height: 200px; box-shadow: 0 0 20px
black; margin: auto; position: relative; }
#box-one { left: -50px; z-index: 1; }
#box-two { right: -50px; z-index: 1; }
https://codepen.io/eoghanmurray/pen/oVEEVK
If you can use filter and drop-shadow then you can apply a drop-shadow to the container. This shadow differs as it conforms to the alpha channel of the image (in this case, the outline of the content) instead of a simple rectangle:
body {
background: darkgrey;
padding-top: 50px
}
#box-one,
#box-two {
background: white;
width: 200px;
height: 200px;
margin: auto;
position: relative;
}
#box-one {
left: -50px;
z-index: 1;
}
#box-two {
right: -50px;
z-index: 1;
}
#top {
filter: drop-shadow(0 0 20px black);
}
<div id="top">
<div id="box-one"></div>
<div id="box-two"></div>
</div>
You can consider drop-shadow filter on a parent element:
body {
background: pink;
}
.b1,
.b2 {
width: 150px;
height: 150px;
background: #fff;
}
.b2 {
margin-left: 100px;
}
.container {
filter:drop-shadow(0 0 10px #000);
}
<div class="container">
<div class="b1"></div>
<div class="b2"></div>
</div>
Or use an extra element to hide the overlapping shadows:
body {
background: pink;
}
.b1,
.b2 {
width: 150px;
height: 150px;
background: #fff;
box-shadow: 0 0 13px #000;
position: relative;
}
.b2 {
margin-left: 100px;
}
.b1:before,
.b2:before {
content: "";
position: absolute;
bottom: 0px;
right: 0;
left: 0;
height: 15px;
background: inherit;
z-index: 1;
}
.b2:before {
top: 0;
bottom: initial;
}
<div class="container">
<div class="b1"></div>
<div class="b2"></div>
</div>
You can also build this using only one element:
body {
background: pink;
}
.container {
width:250px;
height:300px;
background:
linear-gradient(#fff,#fff) top left,
linear-gradient(#fff,#fff) bottom right;
background-size:150px 150px;
background-repeat:no-repeat;
filter:drop-shadow(0 0 10px #000);
}
<div class="container">
</div>
I create a new div and set some css for it.
body { background: darkgrey; padding-top: 50px}
div { background: white; width: 200px; height: 200px; box-shadow: 0 0 20px black; margin: auto; position: relative; }
#box-one { left: -50px; }
#box-two { right: -50px; }
#div1{
position:absolute;
background: white;
width:100px;
height:15px;
margin-right:10px;
box-shadow: none;
margin-top:185px;
margin-left:199px;
content: '';
z-index: 1
}
<div id="div1"></div>
<div id="box-one"></div>
<div id="box-two"></div>
A cleaner solution is to add the box-shadow to a pseudo-element like ::before or ::after and then add position:relative to a parent element.
#box-one
{
left: -50px;
}
#box-two
{
right: -50px;
}
body
{
background: darkgrey;
padding-top: 50px;
}
.box-container
{
position: relative;
z-index: 2;
}
.box
{
background: white;
width: 200px;
height: 200px;
margin: auto;
position: relative;
}
.box::after
{
content: "";
box-shadow: 0 0 20px black;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
<div class="box-container">
<div id="box-one" class="box"></div>
<div id="box-two" class="box"></div>
</div>
Is it possible creating a round shadow (a neat circle with the spread value set to zero) under a square element?
E.g. a DIV with no rounded borders.
I have the following element, which I cannot add further markup to:
<div class="square"></div>
In addition, I cannot use :before and :after pseudo-elements, as they are already styled. That's why I am trying to adapt the box-shadow.
In the example below what I would like to achieve (obtained with a ":before" pseudo-element, which I cannot use).
.circle {
width: 20px;height: 20px; margin: 40px 0 0 40px;
display: inline-block; border:1px solid #000;
position: relative; top: 0; left: 0; background: #fff;
}
.circle:before {
content: ''; display: block; position: absolute; top: -15px; left: -15px;
width: 50px; height: 50px; border-radius: 50%; background: #ddd;
z-index: -1;
}
<div class="circle"></div>
I used the :before pseudo-element only to show the result.
I think I found a quite good solution:
.wrapper {
margin-left: 5rem;
margin-top: 5rem;
}
.element {
width: 14px;
height: 14px;
border: 2px solid #5f5f5f;
border-radius: 2px;
background-color: #fff;
}
.element:before {
content: '';
position: absolute;
width: 14px;
height: 14px;
z-index: -1;
border-radius: 50%;
background-color: transparent;
opacity: 0.2;
box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, .6);
}
<div class="wrapper">
<div class="element"></div>
</div>
I hope it will be a helpful answer for you, - Marta.
There are a couple of ways to go about it. I'd simply put the square div in a bigger container div, then style it as you wish. I've included a couple of examples for you.
I hope this helps! - James.
.square {
width: 20px;
height: 20px;
display: block;
position: relative;
background: #fff;
opacity: 1;
margin: 5px 0 0 5px;
}
.circle,.circle-with-spread {
display: block;
background-color: #000;
opacity: 0.3;
width: 30px;
height: 30px;
border-radius: 15px;
position: absolute;
}
.circle-with-spread {
box-shadow: 0 0 5px 5px rgba(0,0,0,1);
}
<!-- Example Circle Shadow -->
<div class="circle">
<div class="square"></div>
</div>
<!-- Spacing makes it look nice -->
<br />
<br />
<br />
<!-- Second Example -->
<div class="circle-with-spread">
<div class="square"></div>
</div>
I need four boxes in the corners of the div. When hovering on some div, I want to display:block a hidden div in the middle, sharing one border with the box being currently hovered.
Here is jsfiddle with my current solution
It almost works fine. However, there are some bugs regarding the corner area. I display there the block element with background using :after. It is to achieve the effect of one border for two elements.
The problem:
So in Chrome hovering that area gives some strange interlacing effect. Each mouse movement by 1px hides and shows content div. You can see it here in action
In newest Firefox it seems to be ok, but in created jsfiddle there's some other bug which you can test yourself.
I'm using grey background just for better visualization of the problem. It is also suppose to work for box 1 for now. Tried some jQuery with mouseover and hover with no success.
EDIT - Final solution:
The most important thing was to set pointer-events: none; to after block element. Since I got some votes up here's more advanced code on jsfiddle using SASS
, and here's using plain css:
CSS:
.outer {
width: 90%;
height: 300px;
position: relative;
}
.box-content {
display: none;
width: 80%;
height: 80%;
position: absolute;
left: 10%;
top: 13%;
background: white;
z-index: 1;
}
.box {
width: 150px;
height: 60px;
position: absolute;
border: 1px solid white;
background: white;
}
.box:hover:after {
content: '';
background-color: white;
z-index: 2;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.box:hover p {
z-index: 3;
}
.box p {
position: absolute;
top: 23px;
left: 13px;
color: black;
padding: 0;
margin: 0;
}
.box-one {
top: 0;
left: 0;
}
.box-one:hover {
border: 1px solid blue;
}
.box-one:hover ~ .content-one {
border: 1px solid blue;
display: inline-block;
pointer-events: none;
}
.box-two {
top: 0;
right: 0;
}
.box-two:hover {
border: 1px solid red;
}
.box-two:hover ~ .content-two {
border: 1px solid red;
display: inline-block;
pointer-events: none;
}
.box-three {
bottom: 0;
left: 0;
}
.box-three:hover {
border: 1px solid yellow;
}
.box-three:hover ~ .content-three {
border: 1px solid yellow;
display: inline-block;
pointer-events: none;
}
.box-four {
bottom: 0;
right: 0;
}
.box-four:hover {
border: 1px solid green;
}
.box-four:hover ~ .content-four {
border: 1px solid green;
display: inline-block;
pointer-events: none;
}
HTML
<div class="outer">
<div class="box box-one">
<p>BOX NAME 1</p>
</div>
<div class="box box-two">
<p>BOX NAME 2</p>
</div>
<div class="box box-three">
<p>BOX NAME 3</p>
</div>
<div class="box box-four">
<p>BOX NAME 4</p>
</div>
<div class="box-content content-one"></div>
<div class="box-content content-two"></div>
<div class="box-content content-three"></div>
<div class="box-content content-four"></div>
</div>
The reason it is "flickering" is unrelated to the pseudo-element; it's because you are partially overlaying the .box-content element over the .box elements so, when you move your mouse, it is no longer hovering over the .box element that triggered the .box-content element to display, rather it is hovering over the .box-content element itself so it disappears. Move your mouse again and it's hovering over the .box element once more, triggering .box-content to display again. To fix this, simply add a :hover pseudo-class to the .box-content element, like so:
.outer {
width: 100%;
height: 300px;
position: relative;
}
.box {
width: 150px;
height: 60px;
border: 3px solid black;
position: absolute;
z-index: 1;
}
.box:after {
content: '';
background-color: grey;
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.box:hover ~ .box-content {
display: inline-block;
}
.box p {
color: white;
padding: 10px;
z-index: 1000;
}
.box-content {
display: none;
width: 80%;
height: 80%;
border: 3px solid black;
position: absolute;
left: 10%;
top: 11%;
}
.box-content:after {
content: "";
background-color: grey;
z-index: 2;
display: block;
position: absolute;
width: 20%;
height: 30%;
left: 0;
top: 0;
}
.box-content:hover {
display: inline-block;
}
.box-two {
top: 0;
right: 0;
}
.box-three {
bottom: 0;
left: 0;
}
.box-four {
bottom: 0;
right: 0;
}
<div class="outer">
<div class="box">
<p>BOX NAME 1</p>
</div>
<div class="box box-two">
<p>BOX NAME 2</p>
</div>
<div class="box box-three">
<p>BOX NAME 3</p>
</div>
<div class="box box-four">
<p>BOX NAME 4</p>
</div>
<div class="box-content"></div>
</div>
Alternatively, if you do not wish .box-content to remain visible while hovering over it but not hovering over one of the .box elements then add the pointer-events property to .box-content, like so:
.outer {
width: 100%;
height: 300px;
position: relative;
}
.box {
width: 150px;
height: 60px;
border: 3px solid black;
position: absolute;
z-index: 1;
}
.box:after {
content: '';
background-color: grey;
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.box:hover ~ .box-content {
display: inline-block;
}
.box p {
color: white;
padding: 10px;
z-index: 1000;
}
.box-content {
display: none;
width: 80%;
height: 80%;
border: 3px solid black;
position: absolute;
left: 10%;
top: 11%;
}
.box-content:after {
content: "";
background-color: grey;
z-index: 2;
display: block;
position: absolute;
width: 20%;
height: 30%;
left: 0;
top: 0;
pointer-events: none;
}
.box-two {
top: 0;
right: 0;
}
.box-three {
bottom: 0;
left: 0;
}
.box-four {
bottom: 0;
right: 0;
}
<div class="outer">
<div class="box">
<p>BOX NAME 1</p>
</div>
<div class="box box-two">
<p>BOX NAME 2</p>
</div>
<div class="box box-three">
<p>BOX NAME 3</p>
</div>
<div class="box box-four">
<p>BOX NAME 4</p>
</div>
<div class="box-content"></div>
</div>
Note, though, that Opera Mini doesn't support pointer-events and IE only added support in v11.