Overlapping/overlaying multiple inline images
You can use flex and reverse order then no need z-index:
.avatars {
display: inline-flex;
flex-direction: row-reverse;
}
.avatar {
position: relative;
border: 4px solid #fff;
border-radius: 50%;
overflow: hidden;
width: 100px;
}
.avatar:not(:last-child) {
margin-left: -60px;
}
.avatar img {
width: 100%;
display: block;
}<div class="avatars">
<span class="avatar">
<img src="https://picsum.photos/70">
</span>
<span class="avatar">
<img src="https://picsum.photos/80">
</span>
<span class="avatar">
<img src="https://picsum.photos/90">
</span>
<span class="avatar">
<img src="https://picsum.photos/100">
</span>
</div>Overlaying multiple div pictures
Set the position of container to relative so the description would be absolute in relation to it:
.container { height: 100px; width:100px; display: inline-block; position:relative;}
.picture { height: 100%; width:100%}
.contAlign { text-align: center;}
.desc { position:absolute; bottom: 0; left: 0; right: 0; background-color: black; width: 100%; height: 0%; opacity: 0.5; transition: .5s ease;}
.container:hover .desc { height: 40%; }<div class="contAlign"> <div class="container"> <img class="picture" src="https://kbob.github.io/images/sample-3.jpg"> <div class="desc"></div> </div>
<div class="container"> <img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg"> <div class="desc"></div> </div>
<div class="container"> <img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png"> <div class="desc"></div> </div></div>Using overlays on multiple images on one web page
You are making the image to be position:fixed which is the culprit. Remove it and make the container inline-block instead:
* { background-color: #d7c2fc; font-family: Courier New, monospace;}
#title { text-align: Center; font-size: 50px;}
.container { position: relative; display: inline-block;}
.image { display: block; width: 300px; height: 250px;}
.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 250px; width: 300px; opacity: 0; transition: .5s ease; background-color: #008CBA;}
.container:hover .overlay { opacity: 1;}
.text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; background-color: #008CBA;}<h1 id="title"> Why be Vegan?</h1><div class="container"> <img id="animals" src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" alt="animals" class="image"> <div class="overlay"> <div class="text">Animals</div> </div></div><div class="container"> <img id="earth" src="https://ih1.redbubble.net/image.540939652.0382/flat,550x550,075,f.u2.jpg" alt="earth" class="image"> <div class="overlay"> <div class="text">Earth</div> </div></div><div class="container"> <img id="body" src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" alt="body" class="image"> <div class="overlay"> <div class="text">Body</div> </div></div>Overlapping multiple circular images using Flexbox or Grid
You can make use of transform property to adjust each element by X or Y position.
If you want to overlap from first, then you can always modify the DOM order or even the z-index.
.images-container {
display: flex;
margin-bottom: 20px;
}
.images-container.vertical {
flex-direction: column;
}
.circular-image {
width: 100px;
height: 100px;
border-radius: 50%;
}
.circular-image:nth-child(2) {
transform: translateX(-50px);
}
.stack-from-left .circular-image:nth-child(2) {
z-index: -1;
}
.circular-image:nth-child(3) {
transform: translateX(-100px);
}
.stack-from-left .circular-image:nth-child(3) {
z-index: -2;
}
.circular-image:nth-child(4) {
transform: translateX(-150px);
}
.stack-from-left .circular-image:nth-child(4) {
z-index: -3;
}
.vertical .circular-image:nth-child(2) {
transform: translateY(-50px);
}
.vertical .circular-image:nth-child(3) {
transform: translateY(-100px);
}
.vertical .circular-image:nth-child(4) {
transform: translateY(-150px);
}<div class="images-container">
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
</div>
<div class="images-container stack-from-left">
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
</div>
<div class="images-container vertical">
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
<div class="circular-image">
<img src="https://thispersondoesnotexist.com/image" alt="Sample Image" class="circular-image">
</div>
</div>How To Overlap Text Over Two Side By Side Images
I wrapped each image and text in an additional container, and then absolute positioned the text to be centered on top of the image. I think this is what you were looking for.
.image-row { display: flex;}
.image-container { width: 50%; position: relative;}
.image-container img { width: 100%; height: auto;}
.image-container p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; font-weight: bold; margin: 0;}<div class="image-row"> <div class="image-container"> <img src="https://placeimg.com/300/500/nature"> <p>The Team</p> </div> <div class="image-container"> <img src="https://placeimg.com/300/500/nature?t=1529100921702"> <p>The Team</p> </div></div>How to overflow the images on the previous ones?
Here is the best method which I used. Hope You can use this method.
.default-avatar {
background-color: #47d501;
font-weight: 500;
color: #fff;
font-size: 1.6rem;
}
.default-avatar,
.member-overlap-item {
height: 60px;
width: 60px;
}
.member-overlap-item {
margin-right: -10px;
border: 2px solid #fff;
}
.group {
min-height: 40px;
height: auto;
line-height: 1.6rem;
}
.grid-icon {
vertical-align: middle;
line-height: 1;
}
.group-class {
height: 1rem;
line-height: 4rem;
vertical-align: middle;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<div class="col-sm-9 col-md-11 col-lg-12 col-xl-12">
<a class="route d-flex">
<div title="Baby Yoda" class="rounded-circle default-avatar member-overlap-item" style="background: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/baby-yoda.jpg) 0 0 no-repeat; background-size: cover;">
</div>
<div title="R2D2" class="rounded-circle default-avatar member-overlap-item" style="background: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/r2d2.jpg) 0 0 no-repeat; background-size: cover;">
</div>
<div title="Jabba the Hut" class="rounded-circle default-avatar member-overlap-item" style="background: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/jabba-the-hut.png) 0 0 no-repeat; background-size: cover;">
</div>
<div title="Chewbacca" class="rounded-circle default-avatar member-overlap-item" style="background: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/chewy.png) 0 0 no-repeat; background-size: cover;">
</div>
<div title="C-3PO" class="rounded-circle default-avatar member-overlap-item" style="background: url(https://raw.githubusercontent.com/solodev/layering-profile-images/master/images/c-3po.jpg) 0 0 no-repeat; background-size: cover;">
</div>
</a>
</div>Two overlapping images via CSS and JS
I think you're missing the top and the left property in .face-image-on-map.
So I would recommend this:
.face-image-on-map {
position: absolute;
top: 0; /* Positoning: distance from top border */
left: 0; /* Positioning: distance from left border */
width: 100%;
max-width: 42px;
z-index: 100;
opacity: .8;
}
(See the W3Schools page for more information)
Hope this is want you wanted :)
CSS for multiple overlapping images with box shadow
You can play with your margin values. auto on either or both sides (and you can add a percentage on the opposite side to avoid "perfect" positions), and negative margin-top for .image + .image to pull them upwards and overlap.
.container { max-width: 940px; font-size: 0; } .image { display: block; position: relative; width: 62.6%; } .image:nth-child(1) { margin-right: auto; z-index: 3; } .image:nth-child(2) { margin-left: auto; z-index: 2; } .image:nth-child(3) { margin-left: auto; margin-right: auto; z-index: 1; } .image + .image { margin-top: -15.65%; } .image img { height: auto; width: 100%; } .overlay { position: absolute; width: 100%; bottom: 0; opacity: 0; transition: all 0.5s ease; } .overlay:hover { opacity: 1; } .overlay img{ height: auto; width: 100%; }<div class="container"> <div class="image"> <a href=""><img src="https://picsum.photos/280/280/"/></a> <div class="overlay"><img src="https://picsum.photos/280/280/?random"/></div> </div> <div class="image"> <a href=""><img src="https://picsum.photos/280/280/"/></a> <div class="overlay"><img src="https://picsum.photos/280/280/?random"/></div> </div> <div class="image"> <a href=""><img src="https://picsum.photos/280/280/"/></a> <div class="overlay"><img src="https://picsum.photos/280/280/?random"/></div> </div> </div>Related Topics
Inline Style to Act as: Hover in CSS
Force <A Download /> to Download Image Instead of Opening Url Link to Image
Semantically, Which Is More Correct: a in H2, or H2 in A
HTMLagilitypack Drops Option End Tags
Negative Margin and Background
How to Use an <H2> Tag </H2> Inside a <P></P> in The Middle of a Text
Bootstrap Full-Width Text-Input Within Inline-Form
Table with Table-Layout: Fixed; and How to Make One Column Wider
Why Are Only Some of My CSS Grid Boxes Expanding When I Hover Over Them
Tools for Obfuscating HTML and CSS
How to Vertical Center Text Next to an Image in HTML/CSS
How to Wrap Text Around a Non Rectangular Image
Bootstrap 3 - How to Maximize Input Width Inside Navbar
Conditional Rendering of Non-Jsf Components (Plain Vanilla HTML and Template Text)