How to remove line behind transparent button in CSS? See Picture Below
How to remove line behind transparent button in CSS? See Picture Below
How to remove line behind transparent button in CSS? See Picture Below
.fullscreen {
height: 100%;
width: 100%;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center / cover;
}
.line {
position: absolute;
width: 3px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
top: 0;
left: 50%;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<span class="line"></span>
<div class="btn"></div>
</div>
This is more of a hack and might not work for you because you didn't provide any code so far.
My idea was to give the (in my case) .outer_box the same background-image as the .background and scale it the same way.
.fullscreen {
height: 100vh;
width: 100vw;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center / cover;
}
.line {
position: absolute;
width: 3px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
top: 0;
left: 50%;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center / cover;
background-size: 100vw;
}
.btn::after {
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<span class="line"></span>
<div class="btn"></div>
</div>
Related
I know there are many different ways to draw in CSS but I want to draw this shape using CSS ::before and ::after pseudo-elements.
Only the yellow part I could not draw it.
.body{
width:100%;
height:100%;
background:#191919;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
position: relative;
width: 160px;
height: 160px;
background: #824B20;
border-radius: 50%;
}
.circle::before{
content: "";
width: 100px;
height: 100px;
background: #E08027;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.circle::after{
content:"";
/*color : #FFF58F */
}
<div class="body"><div class="circle";div><div><div>
An idea using only gradients:
.box {
width: 200px;
aspect-ratio:1;
border-radius: 50%;
background:
radial-gradient(circle at 78% 50%, yellow 4%,#0000 4.5%),
radial-gradient(circle at 22% 50%, yellow 4%,#0000 4.5%),
radial-gradient(at top,#0000 33%,yellow 34% 45%,#0000 46%)
bottom/100% 50% no-repeat,
radial-gradient(#E08027 40%,#824B20 41%);
}
<div class="box"></div>
.body {
width: 100%;
height: 100vh;
background: #191919;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.circle {
box-sizing: border-box;
position: relative;
width: 160px;
height: 160px;
background: #E08027;
border: 30px solid #824B20;
border-radius: 50%;
}
.half-circle {
position: absolute;
width: 85px;
height: 85px;
border: 14px solid #FFF58F;
border-top-color: transparent;
border-left-color: transparent;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
.half-circle::before,
.half-circle::after {
content: "";
position: absolute;
top: 69px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #FFF58F;
}
.half-circle::before {
left: 0;
}
.half-circle::after {
left: 71px;
transform: translate(-2px, -70px);
}
<div class="body">
<div class="circle">
<div class="half-circle"></div>
</div>
</div>
I have a main div called .div1 on top of it I have a fixed div container that contains my fixed div called .fixedDiv. What I'm trying to do is increase the height of class .fixedDiv and make the scroll respond to the height and content of .fixedDiv and not class .div1. How can I achieve this? Thanks in advance.
.div1 {
width: 100%;
height: 275vh;
background-color: gold;
}
.fixedDivCon {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: rgba(43, 45, 46, 0.89);
z-index: 9999;
overflow: auto;
}
.fixedDivCon .fixedDiv {
position: fixed;
top: 50%;
left: 50%;
width: 80%;
/*not working*/
height: 75vh;
background-color: #ffffff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="fixedDivCon">
<div class="fixedDiv">
</div>
</div>
<div class="div1">
</div>
Try this
.div1 {
width: 100%;
height: 275vh;
background-color: gold;
}
.fixedDivCon {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
/* Enter desired height here */
height: 75vh;
background-color: rgba(43, 45, 46, 0.89);
z-index: 9999;
overflow: auto;
}
.fixedDivCon .fixedDiv {
position: fixed;
top: 50%;
left: 50%;
width: 80%;
height: 100%;
background-color: #ffffff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I want to draw a line between an image, which has a certain width and height. Like Below:
This is what I have tried. With this approach, on window resize the line drawn for div and the actual image has displacement. I want it more responsive. Meaning as the window resizes I want to position the line and the image together seamlessly as though they are a single component.
<div class="car-left-container">
<img alt="" class="car-left" src="images/Car-Left3x.png">
</div>
<style type="text/css">
.car-left {
width: 100px;
height: 100px;
left: 30%;
position: absolute;
top: 80px;
transform: rotate(30deg);
}
.car-left-container {
position: relative
}
.car-left-container:after {
content: '';
position: absolute;
left: 0;
border-top: solid 0.5px #e6e8eb;
background: black;
width: 100%;
z-index: -1;
opacity: 0.5;
transform: rotate(-38deg);
top: 33px;
}
</style>
Any help and suggestions are appreciated.
Thanks
You can use a linear gradient, and change the angle. You can use the background position to move the line:
.car-left {
width: 100px;
height: 100px;
left: 30%;
position: absolute;
top: 80px;
transform: rotate(30deg);
}
.car-left-container {
width: 50vw;
height: 50vh;
border: 1px solid black;
background: linear-gradient(-25deg, transparent calc(50% - 1px), black 50%, transparent calc(50% + 1px)) no-repeat;
background-position: -10vw -10vh;
}
<div class="car-left-container">
<img alt="" class="car-left" src="images/Car-Left3x.png">
</div>
I am not sure what size and angle the line should be.
HTML:
<div class="car-left-container relative">
<img alt="" class="car-left" src="images/Car-Left3x.png">
</div>
CSS:
.car-left {
width: 100px;
height: 100px;
left: 30%;
position: absolute;
top: 80px;
}
.car-left-container {
position: relative;
width: 100px;
height: 100px;
transform: rotate(30deg);
}
.car-left-container:after {
content: '';
position: absolute;
left: -20px;
border-top: solid 0.5px #e6e8eb;
background: black;
width: 200%;
z-index: -1;
opacity: 0.5;
transform: rotate(90deg);
top: 113px;
}
I hope this will work for u.
<style type="text/css">
.car-left-container{
position: relative;
width: 100%;
height: 500px;
top: 0;
left: 0;
}
.car-left {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(30deg);
}
.car-left-container:after {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) rotate(-38deg);
border-top: solid 0.5px #e6e8eb;
width: 100%;
z-index: -1;
opacity: 0.5;
}
</style>
<div class="car-left-container relative">
<img alt="" class="car-left" src="images/Car-Left3x.png">
</div>
This worked for me. I had to just remove position: absolute for car image.
CSS / HTML:
.car-left-container {
width: 100%;
display: flex;
align-items: start;
justify-content: center;
}
.car-left {
width: 100px;
height: 100px;
transform: rotate(30deg);
margin-left: -50px;
}
.car-left-container:after {
content: '';
position: absolute;
left: 0;
border-top: solid 0.5px #e6e8eb;
background: black;
width: 100%;
z-index: -1;
opacity: 0.5;
transform: rotate(-38deg);
top: 0;
}
<div class="car-left-container relative">
<img alt="" class="car-left" src="images/Car-Left3x.png">
</div>
so i have a container div which holds 5 other divs (see picture ) and on hover those divs slide in the direction the arrow is pointed ( to right of picture ). I achieved this simply with CSS's :hover property. However, it achieved it's purpose but I simply just do not like the result ( see snippet ); certain mouse positions would cause the div to go back to the original position then back to hovered position again. Any ideas for improving the hover property? Picture
body, html {
padding: 0;
margin: 0;
}
.body-container {
position: fixed;
overflow : hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
.ele-containers {
width: 50%;
overflow: hidden;
height: 50%;
position: absolute;
transition: 0.6s;
background: blue;
border: 2px white solid;
}
#spring {
top: 0;
left: 0;
}
#summer {
top: 0;
left: 50%;
}
#winter {
top: 50%;
left: 0;
}
#autumn {
top: 50%;
left: 50%;
}
#spring:before, #summer:before, #winter:before, #autumn:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: white;
border-radius: 50%;
}
#spring:hover {
left: -10%;
top:-10%;
}
#winter:hover{
left:-15%;
top:65%;
}
#autumn:hover{
left:65%;
top:65%;
}
#summer:hover {
left: 65%;
top:-15%;
}
#spring:before {
bottom: -100px;
right: -100px;
}
#summer:before {
bottom: -100px;
left: -100px;
}
#winter:before {
top: -100px;
right: -100px;
}
#autumn:before {
top: -100px;
left: -100px;
}
#about-circle {
position: absolute;
border-radius: 100%;
transform: translate(-50%, -50%);
display: flex;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255));
border: solid 4px rgba(255, 255, 255, .5);
}
<div class="body-container">
<div class="ele-containers" id="spring">Spring</div>
<div class="ele-containers" id="summer">Summer</div>
<div class="ele-containers" id="winter">Winter</div>
<div class="ele-containers" id="autumn">Autumn</div>
<div class="circle-container" id="about-circle"></div>
</div>
Instead of moving the main div, you create pseudo elements and move them.
When done like that, it will solve the hover issue.
Note, you might need to adjust the movement a little, I just made them up to show how-to
body,
html {
padding: 0;
margin: 0;
}
.body-container {
position: fixed;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
.ele-containers {
width: 50%;
overflow: hidden;
height: 50%;
position: absolute;
}
#spring {
top: 0;
left: 0;
}
#summer {
top: 0;
left: 50%;
}
#winter {
top: 50%;
left: 0;
}
#autumn {
top: 50%;
left: 50%;
}
#spring:before,
#summer:before,
#winter:before,
#autumn:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: white;
transition: 0.6s;
border-radius: 50%;
transform-origin: left top;
}
#spring:before {
left: calc(100% - 100px);
top: calc(100% - 100px);
}
#summer:before {
top: calc(100% - 100px);
left: -100px;
}
#winter:before {
top: -100px;
left: calc(100% - 100px);
}
#autumn:before {
top: -100px;
left: -100px;
}
#spring:after,
#summer:after,
#winter:after,
#autumn:after {
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
transition: 0.6s;
background: blue;
border: 2px white solid;
transform-origin: left top;
z-index: -1;
}
#about-circle {
position: absolute;
border-radius: 100%;
transform: translate(-50%, -50%);
display: flex;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255));
border: solid 4px rgba(255, 255, 255, .5);
}
#spring:hover::before,
#spring:hover::after {
transform: translate(-30%,-15%);
}
#winter:hover::before,
#winter:hover::after {
transform: translate(-15%,30%);
}
#autumn:hover::before,
#autumn:hover::after {
transform: translate(30%,15%);
}
#summer:hover::before,
#summer:hover::after {
transform: translate(30%,-15%);
}
<div class="body-container">
<div class="ele-containers" id="spring">Spring</div>
<div class="ele-containers" id="summer">Summer</div>
<div class="ele-containers" id="winter">Winter</div>
<div class="ele-containers" id="autumn">Autumn</div>
<div class="circle-container" id="about-circle"></div>
</div>
http://codepen.io/pen/YZdpgb
The pseudo-element after is on front of the div .rotate.
It seems that the z-index: -1 is not working
HTML
<div class="box--container">
<div class="box--rotate">
<div class="box">
<p>my background should be the light grey :(</p>
</div>
</div>
</div>
CSS
body {
height: 80vh;
margin: 10vh 10vw;
}
.box--container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.box--rotate {
position: relative;
width: 250px;
height: 250px;
transform: rotate(45deg);
transform-origin: 100% 150%;
background: #ccc;
z-index: 1;
&::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: #F2C398;
top: 15px;
left: 15px;
z-index: -1;
}
}
.box {
position: relative;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
z-index: 10;
}
try this one it's helpful https://jsfiddle.net/x061nock/ ::after use default color