so I have this code:
.background-image {
height: 700px;
width: 100%;
background: red;
}
.top {
margin-top: -85px;
position: relative;
height: 700px;
}
.top .circle {
width: 100%;
height: 700px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
z-index: 1;
}
.top .circle:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border-radius: 50%;
box-shadow: 0px 0px 0px 9999px rgba(43, 54, 69, 0.75);
z-index: -1;
}
<div class="top">
<div class="background-image"></div>
<div class="circle"></div>
</div>
The result is overlay over the red background, with circle cut out in the middle of that. You can see results here: https://jsfiddle.net/erLqg448/
That code works great in Firefox and Chrome but in safari, that whole overlay seems to be missing. Any ideas?
Apparently safari has a problem with such a large value of spread-radius. But if you use a smaller value, like 99em it should cover your viewport and still render properly. Take a look at above snippet and updated jsFiddle
.background-image {
height: 700px;
width: 100%;
background: red;
}
.top {
margin-top: -85px;
position: relative;
height: 700px;
}
.top .circle {
width: 100%;
height: 700px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
z-index: 1;
}
.top .circle:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border-radius: 50%;
box-shadow: 0px 0px 0px 99em rgba(43, 54, 69, 0.75);
z-index: -1;
}
<div class="top">
<div class="background-image"></div>
<div class="circle"></div>
</div>
Related
I have just started to learn about coding in school, and I'm trying to make a simple project.
I have created a flip card consisting of the Finnish flag and an image. The problem is that when I hover over the flag and it flips, half the picture doesn't show.
.wallpaper {
background: green;
height: 2000px;
width: 1920px;
position: absolute;
}
.flag {
height: 310px;
width: 550px;
background: white;
position: relative;
}
.horizontal {
position: relative;
background: rgba(0, 54, 128, 255);
height: 75px;
top: 40%;
}
.vertical {
position: relative;
top: -75px;
bottom: 0;
left: -75px;
right: 0;
margin: auto;
background: rgba(0, 54, 128, 255);
height: 310px;
width: 75px;
}
.vodka {
height: 200px;
width: 200px;
}
img {
position: relative;
top: 900px;
bottom: 0;
left: 525px;
right: 0;
width: 350px;
height: 250px;
}
.text {
position: absolute;
left: 450px;
top: 100px;
}
.mannen {
color: white;
position: relative;
top: 200px;
left: 75px;
}
.myten {
color: rgba(0, 54, 128, 255);
position: relative;
top: 200px;
left: 200px;
}
.legenden {
color: white;
position: relative;
left: 300px;
top: 200px;
}
.container {
background: rgba(0, 54, 128, 255);
position: fixed;
height: 100px;
width: 1920px;
top: 0;
}
.mikko {
color: white;
position: relative;
left: 800px;
}
.group {
position: relative;
left: 250px;
}
.flip-card {
background: transparent;
width: 550px;
height: 310px;
perspective: 1000px;
position: absolute;
top: 500px;
left: 450px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.image {
position: relative;
top: -900px;
left: 525px;
transform: scale(-1, 1);
z-index: -1;
}
<div class="wallpaper">
<div class="group">
<div class="text">
<h1 style="font-family: Verdana">
<div class="mannen">Mannen,</div>
<div class="myten">myten,</div>
<div class="legenden">legenden!</div>
</h1>
</div>
<div class="vodka">
<img src="https://folkofolk.se/sites/default/files/styles/article_large/public/2016-02/Finlandia_0.jpg.jpeg?itok=2vkru5VU" />
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flag">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
<div="flip-card-back">
<div class="image">
<img src="https://primatelounge.se/wp-content/uploads/2017/03/mikko-tahtinen-500x748.jpg" style="width:550px;height:310px;" />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mikko">
<h1 style="font-family: Verdana">Mikko Tähtinen</h1>
</div>
</div>
</div>
Removed some of the top/left properties of the person image and added
height: 310px;
width: 550px;
object-fit: cover;
to the .image class and some minor changes .
Style according to need and it is advised not to use such a positioning using all from top/bottom as these will be hard to debug and know the behavior
.wallpaper {
background: green;
height: 2000px;
width: 1920px;
position: absolute;
}
.flag {
height: 310px;
width: 550px;
background: white;
position: relative;
}
.horizontal {
position: relative;
background: rgba(0, 54, 128, 255);
height: 75px;
top: 40%;
}
.vertical {
position: relative;
top: -75px;
bottom: 0;
left: -75px;
right: 0;
margin: auto;
background: rgba(0, 54, 128, 255);
height: 310px;
width: 75px;
}
.vodka {
height: 200px;
width: 200px;
}
img {
position: relative;
bottom: 0;
right: 0;
}
.text {
position: absolute;
left: 450px;
top: 100px;
}
.mannen {
color: white;
position: relative;
top: 200px;
left: 75px;
}
.myten {
color: rgba(0, 54, 128, 255);
position: relative;
top: 200px;
left: 200px;
}
.legenden {
color: white;
position: relative;
left: 300px;
top: 200px;
}
.container {
background: rgba(0, 54, 128, 255);
position: fixed;
height: 100px;
width: 1920px;
top: 0;
}
.mikko {
color: white;
position: relative;
left: 800px;
}
.group {
position: relative;
left: 250px;
}
.flip-card {
background: transparent;
width: 550px;
height: 310px;
perspective: 1000px;
position: absolute;
top: 500px;
left: 450px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.image {
height: 310px;
width: 550px;
object-fit: cover;
position: relative;
transform: scale(-1, 1);
z-index: -1;
}
<div class="wallpaper">
<div class="group">
<div class="text">
<h1 style="font-family: Verdana">
<div class="mannen">Mannen,</div>
<div class="myten">myten,</div>
<div class="legenden">legenden!</div>
</h1>
</div>
<div class="vodka">
<img src="https://folkofolk.se/sites/default/files/styles/article_large/public/2016-02/Finlandia_0.jpg.jpeg?itok=2vkru5VU" style="width:550px;height:310px;" />
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flag">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
<div="flip-card-back">
<div class="image">
<img src="https://primatelounge.se/wp-content/uploads/2017/03/mikko-tahtinen-500x748.jpg" style="width:550px;height:310px;" />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mikko">
<h1 style="font-family: Verdana">Mikko Tähtinen</h1>
</div>
</div>
</div>
Simple image flip from above :
.flag {
height: 310px;
width: 550px;
background: white;
position: relative;
margin: 20px;
}
.horizontal {
position: relative;
background: rgba(0, 54, 128, 255);
height: 75px;
top: 40%;
}
.vertical {
position: relative;
top: -75px;
left: -75px;
margin: auto;
background: rgba(0, 54, 128, 255);
height: 310px;
width: 75px;
}
.flipImage1 {
position: absolute;
top: 0;
left: 0;
background-color:white;
z-index: -10;
transform: rotateY(180deg);
}
.flag:hover {
transform: rotateY(180deg);
transform-style: preserve-3d;
}
<div class="flag">
<div class="horizontal"></div>
<div class="vertical"></div>
<img src="https://primatelounge.se/wp-content/uploads/2017/03/mikko-tahtinen-500x748.jpg" style="width:550px;height:310px;" class="flipImage1" />
</div>
Ok first, good on you for learning code.
second, this might be counter intuitive but you shouldn't be using position absolute and transform translate for this much positioning you should try using display flex or grid,
also the problem is that chrome seems to be having problems with z-index: -1 from that .image.
an easier way to do this is to use transition-delay on the image instead of having the image perspective change
I have a assesment from my professor where i need to create a div square and overlay an image over it. i have tried to use Positioning, indexing and i tried to play with the margins but i couldnt figure out how to overlay my image over the div.
can someone help me please?
assignment from professor:
my code result:
my code:
body {
margin: 0;
}
body>* {
max-width: 250px;
max-height: 250px;
}
video {
max-height: 425px;
}
.square {
width: 75%;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
position: relative;
}
img {
width: 66%;
margin-right: -100%;
position: absolute;
z-index: 1;
opacity: 0, 5;
}
<div class="square"></div>
<img src="/images/100km.png" alt="100km bord">
The absolute positioned element needs to be inside the relative positioned element. Otherwise it'll be positioned in relation to root element.
In this case your image needs to be inside the <div>
body {
margin: 0;
}
body>* {
max-width: 250px;
max-height: 250px;
}
.square {
position: relative;
width: 75%;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
}
img {
width: 66%;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
opacity: 0, 5;
border-radius: 50%;
}
<div class="square">
<img src="https://picsum.photos/200" alt="100km bord">
</div>
Here is the issue, you put absolute on the image, but the but the squire needs to be absolute and the image needs to be relative.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment-E1</title>
<style>
body {
margin: 0;
}
body > * {
max-width: 250px;
max-height: 250px;
}
video {
max-height: 425px;
}
.square{
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
position: absolute;
}
img{
width: 66%;
margin-right: -100%;
position: relative;
z-index: 1;
opacity: 0,5;
}
</style>
</head>
<body>
<div class="square"></div>
<img src="/images/100km.png" alt="100km bord">
</body>
</html>
This should do the trick. I created a main container to hold both the square and image and give it a class container. Then used different positions to set it match what you have
//HTML
<div class='container'>
<div class="square"></div>
<img src="/images/100km.png" alt="100km bord">
</div>
CSS
You should adjust the opacity between 0 and 1 . The image is in the bottom right corner to match what you want
.container{
position: relative;
}
.square{
width: 75%;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
position: relative;
}
img{
width: 66%;
margin-right: -100%;
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
opacity: 0.5;
}
This worked.
body {
margin: 0;
}
body>* {
max-width: 250px;
max-height: 250px;
}
.square {
position: relative;
width: 75%;
width: 200px;
height: 200px;
background-color: blue;
border: 10px dashed rgb(10, 241, 164);
border-radius: 50px;
}
img {
width: 66%;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
opacity: 0, 5;
border-radius: 50%;
}
<div class="square">
<img src="https://picsum.photos/200" alt="100km bord">
</div>
I made a bulb in pure CSS and I want the bulb to change color on click. But my bulb shape consists of two shapes, so I cannot hover over both. Is there a way to solve this without using JavaScript, sticking to CSS only? Is there maybe a way to create this yellow shape without the need to combine two? Or any other way I could have the hover effect working.
.box {
position: relative;
margin: auto;
display: block;
margin-top: 8%;
width: 600px;
height: 600px;
background: white;
}
#circle {
position: absolute;
width: 40%;
height: 40%;
background: yellow;
top: 20%;
left: 30%;
margin: 0 auto;
border-radius: 50%;
}
#trapezoid {
position: absolute;
background: yellow;
height: 30%;
width: 40%;
left: 30%;
top: 42%;
-webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
#bottom1 {
position: absolute;
height: 5%;
width: 25%;
background: grey;
top: 72%;
left: 37.5%;
z-index: 1;
}
#bottom1:before {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
left: -8%;
}
#bottom1:after {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
right: -8%;
}
#bottom2 {
position: absolute;
height: 5%;
width: 22%;
background: grey;
top: 78%;
left: 39%;
}
#bottom2:before {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
left: -8%;
}
#bottom2:after {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
right: -8%;
}
#bottom3 {
position: absolute;
height: 5%;
width: 18%;
background: grey;
top: 84%;
left: 41%;
z-index: 1;
}
#bottom3:before {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
left: -8%;
}
#bottom3:after {
content: "";
height: 100%;
width: 20%;
background: grey;
display: block;
position: absolute;
border-radius: 50%;
right: -8%;
}
#shine {
width: 20%;
height: 20%;
background: white;
border-radius: 50%;
top: 20%;
position: absolute;
left: 18%;
}
.halfCircle {
height: 100px;
width: 100px;
border-radius: 0 0 90px 90px;
}
#halfCircle {
height: 45px;
width: 90px;
border-radius: 0 0 90px 90px;
background: black;
margin: 0 auto;
top: 88%;
position: relative;
}
.drop {
width: 5%;
height: 5%;
position: absolute;
border: 15px solid orange;
}
#left {
left: 38%;
top: 45%;
border-radius: 50% 50% 0 50%;
}
#left:after {
content: "";
height: 110px;
width: 24px;
border: 15px solid orange;
display: block;
position: absolute;
left: 100%;
top: 100%;
}
#right {
right: 38%;
top: 45%;
border-radius: 50% 50% 50% 0;
}
#circle:hover {
background: red;
}
#trapezoid:hover {
background: red;
}
<div class='box'>
<div id='circle'>
<div id='shine'></div>
</div>
<div id='trapezoid'></div>
<div id='bottom1'></div>
<div id='bottom2'></div>
<div id='bottom3'></div>
<div id='halfCircle'></div>
<div class='drop' id='left'></div>
<div class='drop' id='right'></div>
<div id='wire'></div>
</div>
You don't have to apply the :hover directly to the element that you want to change. You can hoist it to a wrapping element and apply it there.
Considering your example, your selectors would likely be something along the lines of:
.box:hover #circle {
background: red;
}
.box:hover #trapezoid {
background: red;
}
Consider this concrete example. Hovering either of the nested <div> cause the sibling <div> to also change color because #container is being :hovered.
#foo,
#bar {
height: 20px;
background-color: green;
border: 1px solid white;
}
#foo:hover,
#bar:hover {
background-color: blue;
border: 1px dashed yellow;
}
#container:hover #foo,
#container:hover #bar {
background-color: red;
}
<div id="container">
<div id="foo">foo</div>
<div id="bar">bar</div>
</div>
Trying to create a contact form in an overlay. I have the overlay div working, but it only works if I set it to "position: absolute". The div inside of the overlay, will not position properly, regardless of what I try.
Need the "form-wrap to be centered vertically & horizontally.
<div id="overlay">
<div id="form-wrap">
<img id="close-btn" src="images/framework/close.png">
<form id="form-box">
<input name="first-name" id="first-name" type="text" maxlength="32">
</form>
</div>
</div>
#overlay{
top: 0;
left: 0;
height:100%;
width: 100%;
position: absolute;
z-index: 899;
display: none;
background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
width: 400px;
height: 600px;
position: relative;
z-index: 900;
margin: 0;
background-color: white;
}
try this:
#overlay{
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
z-index: 899;
display: none;
background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
width: 400px;
height: 600px;
position: relative;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
background-color: white;
}
Example
This will only work if the height of your overlay is greater than 600px!
#overlay{
top: 0;
left: 0;
height: 100%;
width: 100%;
position: absolute;
z-index: 899;
display: none;
background-color: rgba(0, 0, 0, 0.41);
}
#form-wrap{
width: 400px;
height: 600px;
top: 50%;
position: relative;
z-index: 900;
margin: -300px auto 0 auto;
background-color: white;
}
Example
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/