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>
Related
I will show you a simple example related to my task.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<html>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
</html>
As you can see in the above example, there are 2 fixed divs and there is 1 relative div in the first fixed div.
And I am going to show 1 absolute div in the relative div. but it is hidden by the second fixed div.
How to show the whole absolute div without any hidden part.
Just replace your blocks in HTML.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
z-index: 1000;
}
<html>
<div class="fixed2">
fixed1
</div>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
</html>
There are multiple ways of doing this
Move div.fixed1 below div.fixed2
(or)
You can increase the z-index of div.fixed1
.fixed1 {
z-index: 1;
}
Use the property z-index, so you will specify that div.fixed1 is in front of div.fixed2:
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
z-index: 1;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
I have this HTML:
<div id="container">
<div id="content"></div>
<div id="close-button"></div>
</div>
and this CSS:
#container {
width: 50%;
}
#content {
width: 100%;
height: 50px;
background-color: gray;
}
#close-button {
float: right;
margin-left: 100%;
height: 50px;
width: 50px;
background-color: red;
}
JSFiddle: https://jsfiddle.net/Le53m70b/
How can I make the red box overlaid on top of the gray one, instead of being on a separate line? Note that the size of the container is not fixed, but regardless of its width, I'd like the gray box to cover 100% of it and the red box to be at its very right.
Ah, this finally works: https://jsfiddle.net/Le53m70b/1/
#container {
position: relative;
width: 50%;
}
#content {
width: 100%;
height: 50px;
background-color: gray;
}
#close-button {
position: absolute;
right: 0;
top: 0;
height: 50px;
width: 50px;
background-color: red;
}
You can use z-index property. Which is used to overlay an individual div over another div element.
#container{
width: 200px;
height: 200px;
position: relative;
margin: 20px;
}
#content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
#close-button{
z-index: 9;
margin: 20px;
}
Hi there, I want to crop the image within a div that is divided into two parts in a circle. One side is half cropped pic and the other side is just background color with the name on it. I am currently using following code :
width: 220px;
userdp {
height: 220px;
border: 4px solid red;
border-radius: 50%;
position: relative;
object-fit: none;
}
If your image is inside the div element that you're applying that styling to as below you should just need to add overflow: hidden to the CSS.
<div class="userdp">
<img src="..." />
</div>
And the styling.
.userdp {
height: 220px;
width: 220px;
border-radius: 50%;
overflow: hidden;
}
I've created an example here for you:
https://jsfiddle.net/20g4uL0j/1/
You can use the following,
**HTML**
<div class="circle">
<div class="image">
<img src="your-image.png" />
</div>
<div class="color">Text</div>
**CSS**
.circle{
width: 220px;
height:220px;
border-radius: 50%;
overflow:hidden;
}
.image, .color{
width:50%;
float:left;
height:100%;
}
.color{
background-color: #099;
}
You can do this as follow:
https://jsfiddle.net/ivan0013/f1a06cxe/
div {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 55px;
width: 110px;
}
.right,
.left {
height: 110px;
width: 55px;
}
.top {
border-top-left-radius: 110px;
border-top-right-radius: 110px;
}
.right {
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
}
.bottom {
border-bottom-left-radius: 110px;
border-bottom-right-radius: 110px;
}
.left {
border-bottom-left-radius: 110px;
border-top-left-radius: 110px;
}
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
overflow: hidden and a little more play with the positioning, z-index, and object-fit may help you achieve that.
Here is an example for you (EDITED after re-reading your question):
.userdp {
height: 220px;
width: 220px;
border: 4px solid black;
border-radius: 50%;
position: relative;
overflow: hidden;
}
.userdp-img {
z-index: 1000;
width: 100%;
height: 100%;
object-fit: cover;
}
.userdp-info {
z-index: 2000;
width: 50%;
height: 100%;
color: #ddd;
background-color: red;
border-right: 3px solid black;
}
.userdp-info-inner {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.userdp-img,
.userdp-info {
position: absolute;
top: 0;
left: 0;
}
<div class="userdp">
<div class="userdp-info">
<div class="userdp-info-inner">
John Doe
</div>
</div>
<img src="https://unsplash.it/300/300?image=1005" class="userdp-img">
</div>
Hope it helped.
*{
margin: 0;
padding: 0;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
}
.container #short-des{
background: rgba(0,0,0,.5);
height: 400px;
width: 500px;
position: relative;
}
<div class="container">
<img src="cover.jpg">
<div id="short-des">
</div>
</div>
i want short-des div to visible over image at the center i tried z-index but it not working. please help me out to fix this with reason so i will take these things in future
Put your div positioned absolute to overlap your image. Use left/top/right/bottom properties to set it's position.
It's position will be relative to closest non-static (absolute/relative/fixed) positioned element or <body>
#short-des,
#short-des2 {
position: absolute;
left: 90px;
top: 50px;
width: 50px;
height: 50px;
background-color: rgba(100, 250, 100, .6);
z-index: 7;
}
#short-des2 {
z-index: 8;
left: 100px;
top: 55px;
background-color: rgba(250, 100, 100, .7);
}
.wrapper {
margin: 50px;
position: relative;
}
<div class="wrapper">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<div id="short-des"></div>
<div id="short-des2"></div>
</div>
You can add image as background of container div [.container] as
.container{
background: url('path/to/image'); // eg. 'cover.jpg'
background-repeat: no-repeat;
background-size: 100% 100%;
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
and remove the <img> from html
<div class="container">
<div id="short-des"></div>
</div>
Try this...
Just set position : absolute then set the location using top and left CSSproperties.
* {
margin: 0;
padding: 0;
}
.container {
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img {
width: 100%;
height: 638px;
}
.container div#short-des {
background: rgba(0, 0, 0, .5);
height: 40px;
width: 50px;
top:40%;
left:50%;
position: absolute;
z-index:999;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<div id="short-des">
</div>
</div>
</body>
</html>
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.box {
position: relative;
width: 638px;
height: 300px;
}
.box img{
width: 100%;
height: 500px;
}
.box #short-des{
background: rgba(0,0,0,.5);
height: 400px;
width: 500px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -250px;
}
<div class="container">
<div class="box">
<div id="short-des">
</div>
<img src="http://www.slowtrav.com/blog/girasoli/IMG_6820.JPG">
<div id="short-des">
</div>
</div>
</div>
http://codepen.io/rizwanmughal/pen/KgZQRx
Here's a brief explanation of my diagram (shown below):
The yellow box is the parent.
The black and cyan boxes are children of the yellow box.
The excess cyan box is hidden by it's parent via overflow: hidden
Since overflow: hidden breaks margin: auto, I've attempted to center the black box to its parent (i.e. the yellow box) by using left: 50%. However, the black box aligns itself to the full width of the cyan box.
Could someone explain another way I can align the black box to the width of its parent? I would accept an answer that fixes margin: auto as well.
Here is my code:
.yellow-box {
display:table-cell;
height:498px;
width:33.33333333%;
overflow:hidden;
position:relative;
}
.cyan-box {
display:block;
height:auto;
position:absolute;
z-index:1;
top:0;
left:0;
width:654px;
height:654px;
}
.black-box {
width:144px;
height:84px;
position:absolute;
z-index:2;
}
What a fantastic optical illusion you've accidentally created!
Really though, left: 50% is working just fine. While it looks like .black-box is centering to .cyan-box, in reality left: 50% is moving the leftmost side of .black-box—not the center as you are expecting—to the center of .yellow-box. Fixing this is easy with the addition of transform: translate(-50%); to .black-box. This moves .black-box back 50% of its width, which truly centers it to its parent.
.black-box {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
transform: translate(-50%);
}
.yellow-box {
height: 498px;
width: 33.33333333%;
position: relative;
background: yellow;
margin-bottom: 20px;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 654px;
background: cyan;
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
The illusion breaks when the size of the page changes. I've added a line down the center so you can see the middle of .yellow-box.
Here's an example comparing the difference.
.yellow-box {
height: 100px;
width: 33.33333333%;
position: relative;
background: yellow;
margin-bottom: 20px;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 100px;
background: cyan;
}
.black-box {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
}
.black-box-two {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
transform: translate(-50%);
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
<div class="yellow-box">
<div class="black-box-two">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
So .black-box is not really aligning to it's sibling at all, it just looks that way.
If you want to be able to use margin: 0 auto then you need to use position: relative on .black-box. Margin's have no affect on absolutely positioned elements.
.yellow-box {
height: 498px;
width: 33.33333333%;
position: relative;
background: yellow;
margin-bottom: 20px;
overflow: hidden;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 654px;
background: cyan;
}
.black-box {
width: 144px;
height: 84px;
position: relative;
z-index: 2;
background: black;
margin: 0 auto;
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
If you use position: relative instead of position: absolute, margins once again take effect. You can even still use top, right, bottom, and left if you care to do so.
Here's an example contrasting the two working solutions with the code you provided (left is using transform: translate(-50%), middle is the original code, and the right is using margin: 0 auto).
.yellow-box {
height: 100px;
width: 30%;
position: relative;
background: yellow;
margin-bottom: 20px;
overflow: hidden;
}
.cyan-box {
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 654px;
height: 100px;
background: cyan;
}
.black-box {
width: 144px;
height: 84px;
position: relative;
z-index: 2;
background: black;
margin: 0 auto;
}
.black-box-two {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
margin: 0 auto;
}
.black-box-three {
width: 144px;
height: 84px;
position: absolute;
z-index: 2;
background: black;
left: 50%;
transform: translate(-50%);
}
.half {
width: 50%;
border-right: 1px black solid;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: space-between;
}
<div class="yellow-box">
<div class="black-box">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
<div class="yellow-box">
<div class="black-box-two">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>
<div class="yellow-box">
<div class="black-box-three">
</div>
<div class="cyan-box">
</div>
<div class="half"></div>
</div>