This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 1 year ago.
My HTML is
<section class="container">
<div class="tiktok">
<img src="img/langhe.jpeg" class="blurredImg">
<img src="img/pp.jpeg" class="center">
</div>
<div class="tiktok">
<img src="img/langhe.jpeg" class="blurredImg">
<img src="img/pp.jpeg" class="center">
</div>
<div class="tiktok">
<img src="img/langhe.jpeg" class="blurredImg">
<img src="img/pp.jpeg" class="center">
</div>
</section>
My CSS is:
.container {
height:100%;
width: 100%;
overflow-y: scroll;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(3rem);
scroll-snap-type: y mandatory;
position: relative;
z-index: 1;
border: none;
}
.blurredImg{
width: 100%;
height: 100%;
filter: blur(8px);
-webkit-filter: blur(8px);
}
.tiktok {
height: 100%;
width:100%;
background-color: black;
scroll-snap-align: start;
}
.center{
margin: auto;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
border: 10px solid white;
}
while "langhe.jpeg" is displayed in 3 different divs one after another, "pp.jpeg" images are displayed one on top of each other, instead of being displayed each on a single div.
I'm pretty sure the issue is on "position: absolute;" in the "center" class, but I might be wrong.
If each element with .center has position: absolute then you need to set position: relative on the parent (.tiktok)
.container {
height: 100%;
width: 100%;
overflow-y: scroll;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(3rem);
scroll-snap-type: y mandatory;
position: relative;
z-index: 1;
border: none;
}
.blurredImg {
width: 100%;
height: 100%;
filter: blur(8px);
-webkit-filter: blur(8px);
}
.tiktok {
height: 100%;
width: 100%;
background-color: black;
scroll-snap-align: start;
/* Added by me */
position: relative;
}
.center {
margin: auto;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
border: 10px solid white;
}
<section class="container">
<div class="tiktok">
<img src="https://picsum.photos/200" class="blurredImg">
<img src="https://picsum.photos/200" class="center">
</div>
<div class="tiktok">
<img src="https://picsum.photos/200" class="blurredImg">
<img src="https://picsum.photos/200" class="center">
</div>
<div class="tiktok">
<img src="https://picsum.photos/200" class="blurredImg">
<img src="https://picsum.photos/200" class="center">
</div>
</section>
Related
I want to centralize a div block on both x-axis and y-axis. But I can't move the block by using translate.
.maincontain {
position: relative;
min-height: 100%;
width: 100%;
float: left;
}
.bannerimage {
position: absolute;
width: 64%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: 100% 100%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>
You may consider using flex or grid to avoid playing around with position, min-height can also use vh units (viewport height) instead % that requires to inherit an height value from the parent to calculate it.
examples:
body {
margin: 0;
}
.maincontain {
display: grid;
min-height: 100vh;
}
.bannerimage {
margin: auto;
width: 64%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>
body {
margin: 0;
}
.maincontain {
display: flex;
min-height: 100vh;
}
.bannerimage {
margin: auto;
width: 64%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>
I have two div A and B.
Now I want to set an image for both div like below image.
HTML
<div class="navbar-slider">
<div class="navbar"></div>
<img src="image_src" alt="Test Image">
<div class="slider"></div>
</div>
Can't understand what will be the css position.
Anybody help please? Thanks in advance.
.navbar-slider {
display: flex;
flex-direction: column;
}
.navbar {
width: 200px;
height: 200px;
border: 1px solid;
position: absolute;
transform: translate(25%, 0%);
background-color: green;
}
img {
width: 202px;
position: absolute;
transform: translate(25%, 50%);
border-radius: 50%;
z-index: 9999;
}
.slider {
width: 200px;
height: 200px;
border: 1px solid;
position: absolute;
transform: translate(25%, 100%);
background-color: yellow;
}
<div class="navbar-slider">
<div class="navbar"></div>
<img src="https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg" alt="Test Image">
<div class="slider"></div>
</div>
HTML
<div></div>
<img src="image_src" alt="Test Image">
<div></div>
CSS
div{
height: 200px;
}
img{
height: 200px;
position: absolute;
top: 100px;
}
Just use position absolute and translate it Y -50%, by this it will always vertical center half of its height
.navbar {background: #ccc;height: 100px;}
.navbar-slider {position: relative;}
img{
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.slider {background: #333;height: 100px;}
<div class="navbar-slider">
<div class="navbar">Upper</div>
<img src="https://i.stack.imgur.com/12F8N.png" alt="Test Image">
<div class="slider">Lower</div>
</div>
Try this.
.navbar{height:100px;background-color:#d37245;}
img{width:200px;position:relative;}
.img{ margin: 0; position: absolute; left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
.slider{height:100px;background-color:#d34545;}
<div class="navbar-slider">
<div class="navbar"></div>
<div class="img">
<img src="https://dcassetcdn.com/design_img/1559024/551167/551167_7840631_1559024_911ff84c_image.png" alt="Test Image">
</div>
<div class="slider"></div>
</div>
I have some issue about achieving this. I put the the back ground image in multiple divs, but it's not quite working. Image is repeating on fixed when I make the screen smaller or bigger. when I change it to absolute then every div having an image to itself.
Is it possible to fix these problem?
here it's fiddle:
header {
position: relative;
height: 100vh;
padding: 75px;
}
header div.container {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 425px;
display: flex;
overflow: hidden;
}
header div.container .context {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
= cols
=== */
header
.container
.col {
width: 50%;
height: 425px;
}
header
.container
.col
.image {
height: 100%;
height: 50%;
background-image: url("https://i.imgur.com/jtZfhST.png");
background-attachment: fixed;
background-position: top left;
}
header
.container
#col-left {
position: relative;
z-index: 2;
top: 12.5px;
}
header
.container
#col-left
.image1, .image3 {
margin-right: 2px;
}
header
.container
.col
.image1, .image2 {
margin-bottom: 2px;
}
header
.container
#col-right {
position: relative;
z-index: 2;
bottom: 12.5px;
}
<header>
<div class="container">
<div class="col" id="col-left">
<div class="image image1"></div>
<div class="image image3"></div>
</div>
<div class="col" id="col-right">
<div class="image image2"></div>
<div class="image image4"></div>
</div>
</div>
</header>
Is this what you're looking for?
.split {
background-image: url(https://images.unsplash.com/photo-1568955773021-d347deaffa1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1289&q=80);
background-attachment: fixed;
width: 30%;
height: 300px;
margin: 0 10px 10px 0;
display: inline-block;
background-size: cover;
background-position: center;
}
.container {
margin: 10px 0 0 10px;
}
<div class="container">
<div class="row">
<div class="split"></div>
<div class="split"></div>
<div class="split"></div>
</div>
<div class="row">
<div class="split"></div>
<div class="split"></div>
<div class="split"></div>
</div>
</div>
I am trying to center a group (a table with 3x3) of pictures to the center of the webpage, I manage to do it before adding image overlay to it. But since I added image overlay, the images are appearing on top left of the webpage. How do i group them and center them, also how am I supposed to get the image location so that when I set the image overlay, it goes to the specific picture as each picture will have different image overlay text.
CSS
.container {
position: relative;
width: 100px;
height: 100px;
}
.image {
display: block;
width: 100px;
height: 100px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: red;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
HTML
<div style="text-align:center">
<div class="container">
<img src="wheel1.jpg" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="wheels2.jpg" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="wheel3.jpg" class="image"">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
`
You could center it using flexbox. Change your main div
<div style="text-align-center;">
......
</div>
to
<div style="display: flex; flex-direction: column;align-items: center;">
.....
</div>
And it should work.
.wrapper{
display: flex;
flex-direction: row;
justify-content: center;
}
.container {
position: relative;
width: 100px;
height: 100px;
}
.image {
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: red;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="wrapper">
<div class="container">
<div class="image"></div>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<div class="image"></div>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<div class="image"></div>
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
Here is the fiddle.
I want to create a responsive circle and I want to fit the image. I want to use img tag not with css (background)
Here is what i've tried
.circular--portrait {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
height: auto;
}
<div class="circular--portrait">
<img src="img.jpg" />
</div>
.circular--portrait {
position: relative;
width: 20vw;
height: 20vw;
overflow: hidden;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="circular--portrait">
<img src="http://beerhold.it/500/300" />
</div>
Here's a solution that has the image be responsive according to the width of its parent container.
.container {
/* Feel free to adjust the values here so you can see it being responsive */
width: 200px;
}
.circle {
position: relative;
width: 100%;
height: 0;
padding: 100% 0 0;
border-radius: 50%;
overflow: hidden;
border: 1px solid gray;
}
.circle img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<div class="circle">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Chapultepec_Zoo_-_Jaguar_%2802%29.jpg/2560px-Chapultepec_Zoo_-_Jaguar_%2802%29.jpg" />
</div>
</div>
You can try it out on CodePen
You can try to do it with SCSS. You just need to create one variable.
$width: calc(100vw / 5);
.circle {
width: $width;
height: $width;
background: url('https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350');
border-radius: 50%;
float: left;
margin: 5px;
}
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
please see the fiddle
You can try to do it with SCSS. You just need to create one variable.
$width: calc(100vw / 5);
.circle {
width: $width;
height: $width;
border-radius: 50%;
float: left;
margin: 5px;
background: red;
overflow: hidden;
}
<div class="circle">
<img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
<img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
<img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
<div class="circle">
<img src="https://images.pexels.com/photos/17679/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" alt="">
</div>
Please see the fiddle