I'm having a problem with span where it is changing the height of my div, breaking the styling I have implemented.
I have four images stacked 2 by 2 and I want text to roll up when I hover over them.
However, when I hover over them and the text appears it changes the size of the div since I have translated the text up by a certain amount.
I have made the divs blue so you can better see what is happening.
The divs obtain their height automatically. There are no set pixel heights in my website; everything is made using percentages so it would seem I can't just hide overflow.
Any help would be much appreciated on how I can fix this.
/* CSS Document */
body {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
background-image: url("images/background/space2.jpg");
background-size: cover;
margin: 0px;
}
#navigation {
width: 17%;
height: 100%;
position: fixed;
z-index: 3;
margin-left: 8%;
background-color: black;
opacity: 0.8;
filter: alpha(opacity=80);
float: left;
}
.navigationbody {
width: 100%;
height: 50px;
border-bottom: 2px rgba(255, 255, 255, 0.1) solid;
text-align: center;
}
.navigationbody a {
text-decoration: none;
color: white;
font-size: 30px;
position: relative;
top: 15%;
}
.navigationbody a:hover {
opacity: 0.8;
filter: alpha(opacity=80);
}
#navcontent {
height: auto;
margin-top: 50%;
position: static;
background-color: ;
align-items: center;
align-content: center;
}
#icon {
width: 100%;
margin-bottom: 10px;
background-color: ;
margin-left: 15%;
}
#bodycontainer {
bottom: 200px;
}
#icon img {
width: 70%;
height: auto;
}
#container {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
}
#contentcontainer {
width: 75%;
margin-left: 25%;
height: 100%;
z-index: 2;
float: left;
overflow-y: auto;
}
#contentcontainer:hover {
background-color: rgba(0, 0, 0, 0.3);
}
#content {
padding: 0px;
}
.about {
width: auto;
margin-top: 10%;
margin-bottom: 30%;
margin-left: 20%;
margin-right: 20%;
text-align: center;
padding-bottom: 20px;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.about a {
color: white;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.20);
}
.about h1 {
color: white;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.about h2 {
color: white;
}
.abouthome {
width: auto;
margin-top: 10%;
margin-bottom: 30%;
margin-left: 20%;
margin-right: 20%;
text-align: center;
padding-bottom: 20px;
}
.abouthome h2 {
color: white;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.abouthome a {
color: white;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.20);
}
.software {
width: 100%;
margin-top: 60px;
align-content: center;
background-color: ;
}
.software img {
width: 100px;
height: auto;
}
.software img:hover {
opacity: .5;
}
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
#contentgames {
right: 0px;
padding-left: 10%;
padding-top: 20%;
}
.games {
width: 45%;
height: auto;
overflow: hidden;
margin-right: 20px;
float: left;
transition: 0.5s;
position: relative;
background-color: aqua;
word-break: keep-all;
}
.games:hover {}
.games span {
color: white;
position: relative;
left: 10px;
bottom: 20px;
margin: 10px;
padding: 5px;
font-size: 0px;
opacity: 0;
transition: 0.5s;
align-content: center;
}
.games:hover span {
color: white;
position: relative;
bottom: 200px;
margin: 10px;
font-size: 18px;
opacity: 1;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steven game design</title>
<link rel="stylesheet" type="text/css" href="style3.css" />
</head>
<div id="navigation">
<div id="navcontent">
<div id="icon">
<img src="http://placehold.it/150x150">
</div>
<div id="bodycontainer">
<div class="navigationbody"></div>
<div class="navigationbody">
Home
</div>
<div class="navigationbody">
About
</div>
<div class="navigationbody">
Blog
</div>
<div class="navigationbody">
Videos
</div>
<div class="navigationbody">
Pictures
</div>
<div class="navigationbody">
Contact
</div>
</div>
</div>
</div>
<body>
<div id="container">
<div id="contentcontainer">
<div id="contentgames">
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span> This is a simple game I started making in flash. All of the artwork was created in flash. Unfortunately I never completed the game many things don't work such as the score, taking damage, boss and many more
</span>
</div>
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span> This is a simple game I made in flash it took less than a week to create.</span>
</div>
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span> This is another simple game in flash I made over the course of a few days.</span>
</div>
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span>This is the game I am currently working on. It is my first 3d game. I am making it in the unreal engine 4.</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If the goal is for the image to be the deciding factor for the position and size of the div and the elements within it, this minimal, responsive example should provide some examples:
https://jsfiddle.net/d7aab2x7/2/
The critical code sets the text block to be positioned absolutely, allow the div to constrain it's size around the image:
div {
border: 1px solid red;
display: inline-block;
width: 40%;
position: relative;
overflow: hidden;
}
img {
display: block;
width: 100%;
}
span {
position: absolute;
bottom: -50px;
background: green;
height: 50px;
transition: bottom 200ms ease-out;
}
For this HTML:
<div>
<img src="http://placehold.it/300x300" />
<span>Some text that will appear on hover of the image</span>
</div>
Please note: I have re-created using the simplest example possible, and my fiddle uses only CSS for animation. Hopefully this provides you with an answer, while also providing general usefulness to the next person searching for something like this.
Related
I have a gallery item with some image in its body. It has to display MORE link in the center of the body when I hover over gallery item (which works just fine) and display 0.5 opacity when I hover over MORE link. Even though z-index is bigger than parent's, for some reason :hover event simply does not fire. Any clue on how to fix this? My cursor: pointer also does not work.
HTML:
<div class="gallery _flex-between">
<div class="gallery__item gallery-item _flex-column-center">
<div class="gallery-item__body">
<div class="gallery-item__more-container">
<a class="gallery-item-more">More →</a>
</div>
<img src="/resources/projects/1.jpg" alt="" class="gallery__img">
</div>
<div class="gallery-item__footer">
Everlasting Summer
</div>
</div>
</div>
CSS:
._absolute-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.gallery {
margin-top: 4em;
width: 90%;
}
.gallery-item__footer {
font-size: 1.6rem;
margin-top: 1em;
width: 100%;
border: 1px solid black;
text-align: center;
border-radius: 35px;
padding: .5em 0;
letter-spacing: 2px;
background-color: white;
transition: background-color .3s, color .3s;
}
.gallery__item {
position: relative;
width: 30%;
max-width: 600px;
}
.gallery-item__more-container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
transition: background-color .3s;
border-radius: 35px;
z-index: 2;
}
.gallery-item__link {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
z-index: 4;
}
.gallery-item-more {
position: relative;
z-index: 1000000000;
width: 50%;
background-color: rgba(255, 255, 255, 1);
opacity: 0;
transition: background-color .3s;
color: black;
font-weight: bold;
letter-spacing: 1px;
padding: 1em 0;
border-radius: 35px;
text-align: center;
cursor: pointer;
}
.gallery-item-more:hover {
background-color: rgba(255, 255, 255, .5);
}
.gallery-item__link:hover ~ .gallery-item__footer {
background-color: black;
color: white;
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item__more-container {
background-color: rgba(0,0,0,0.8);
}
.gallery-item__link:hover ~ .gallery-item__body .gallery-item-more {
opacity: 1;
}
.gallery-item__body {
width: 100%;
position: relative;
}
._flex-column-center {
display: flex;
flex-direction: column;
align-items: center;
}
.gallery__img {
object-position: top;
height: 25vw;
width: 100%;
border-radius: 35px;
}
Move the image before the more-button and it should work: Codepen
<div class="gallery _flex-between">
<div class="gallery__item gallery-item _flex-column-center">
<div class="gallery-item__body">
<img src="/resources/projects/1.jpg" alt="" class="gallery__img">
<div class="gallery-item__more-container">
<a class="gallery-item-more">More →</a>
</div>
</div>
<div class="gallery-item__footer">
Everlasting Summer
</div>
</div>
</div>
I'm trying to create a simple diagonally splitted header using flex container and triangle divs like this:
But for some reason it's not working.
Here is a simplified working example:
function myFunction() {
var e1 = document.getElementById("1");
var e2 = document.getElementById("2");
var els = document.getElementsByClassName("el");
for (let el of els)
el.classList.toggle("active");
e1.classList.toggle("active");
e2.classList.toggle("active");
}
button{
width: 40px;
height: 40px;
}
*{
transition: all 0.3s ease-in-out;
}
body{
background-color: #454545;
}
.el{
width: 50px;
height: 50px;
background-color: blue;
}
.el:nth-of-type(1){
background-color: red;
}
.el.active{
background-color: #454545;
}
.flex{
margin-top: 50px;
margin-left: 50px;
display: flex;
}
.triangle {
position: absolute;
width: 0;
height: 0;
margin-left: 30px;
border-style: solid;
border-width: 50px 30px 0 0;
border-color: red transparent transparent transparent;
}
.reversed-triangle {
position: absolute;
width: 0;
height: 0;
margin-left: 30px;
border-style: solid;
border-width: 0 0 50px 30px;
border-color: transparent transparent blue transparent;
}
.triangle.active{
border-color: #454545 transparent transparent transparent;
}
.reversed-triangle.active{
border-color: transparent transparent #454545 transparent;
}
<button onClick="myFunction()"> Click!
</button>
<div class="flex">
<div class="el active"> </div>
<div class="triangle active" id="1" > </div>
<div class="reversed-triangle" id="2"> </div>
<div class="el"> </div>
</div>
It works perfectly in jsfiddle but the same layout doesn't work in my project.
I'm using react and plain css, this is where it doesn't work:
I can't get both elements to work correctly. As you see, in the image above the right-hand h3 element (Things I've done) overlaps the dark triangle on the left.
If i add z-index: 1 to the overlapped triangle, the opposite triangle will be overlapped when i click the other element like so:
Here you can find the complete code (obv it doens't compile in jsfiddle).
If i forgot to mention something please let me know.
Thank you very much for your time!
Simple example using flex and :before to re-create your image.
body {
background-color: #565656;
}
.wrapper {
width: 400px;
margin: auto;
}
.full-width {
background-color: #565656;
border: solid #fff 1px;
}
.button {
min-height: 80px;
width: 100%;
margin: 0 auto;
display: flex;
}
.button-left {
background-color: #fff;
min-height: 80px;
width: 38%;
position: relative;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
z-index: 1001;
}
.button-right {
width: 62%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-left: 1.7em;
font-size: 1.5em;
color: #fff;
}
.button-left:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 80px solid white;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 80px solid transparent;
position: absolute;
top: 0;
right: -80px;
}
<div class="wrapper">
<div class="full-width">
<div class="button">
<div class="button-left">
<p>Me</p>
</div>
<div class="button-right">
Things I've done
</div>
</div>
</div>
</div>
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
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>