How do I get the two images contained within the two divs to display side-by-side? I've tried changing the variables within container as display: inline-block; and float: left; as suggested by some other threads, but those did not work the way I tried them.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
How it looks:
I want these to be displayed side-by-side, not on top of one-another.
If you wrap the two containers in a div set to display: flex you'll be fine.
<div class="wrapper">
<div class="container">
<!-- your content -->
</div>
<div class="container">
<!-- your content -->
</div>
</div>
.wrapper {
display: flex;
}
I hope it helps :)
Simply add float:left to the container class.
Result:
Related
How would I put headings in the center of each of these images? For example over the first one "Music" in the center of the image
<div class="row">
<div class="item">
<img src="images/music_cover.png"/>
</div>
<div class="item">
<img src="images/event_cover.png"/>
</div>
<div class="item">
<img src="images/lights_cover.png"/>
</div>
</div>
The below is the CSS code:
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The below is the HTML code.
<div class="container">
<img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>
I hope this should work for you.
Suppose you introduced these headings into your HTML:
<div class="row">
<div class="item">
<h2>Heading 1</h2>
<img src="images/music_cover.png"/>
</div>
<div class="item">
<h2>Heading 2</h2>
<img src="images/event_cover.png"/>
</div>
<div class="item">
<h2>Heading 3</h2>
<img src="images/lights_cover.png"/>
</div>
</div>
You can achieve a quick centered heading result, over your images, by introducing the follow css:
.item {
position:relative;
}
.item h2 {
position:absolute;
text-align:center;
top:50%;
left:0;
right:0;
line-height:1;
margin-top:-0.5em;
}
Something like this I would imagine. Create a container that contains both your image and an absolute div to contain the text
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.item {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<div class="item">
<img src="images/music_cover.png" style="width:100%;"/>
<div class="centered">Centered</div>
</div>
</html>
Make the images backgrounds, use the different properties for position, attachment, size, etc. to get what you need
See https://developer.mozilla.org/en-US/docs/Web/CSS/background
Or a more reliable and scalable approach: put the image into an SVG via a tag (see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag) and add text to the SVG
I tried to get an example from w3schools running, but in my case there are multiple images. The overlay is displayed for the entire window instead of the 1st image (I plan to do this for all images later).
Here is my code:
.flex-container {
display: flex;
}
.col1 {
position: relative;
display: block;
}
.img1-wrap {
display: block;
}
.image {
display: block;
/*width: 100%;*/
height: auto;
}
.overlay {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
/*width: 100%;*/
height: 20%;
transition: .5s ease;
}
.img1-wrap:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="flex-container">
<div class="col col-1">
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image2">
</div>
<div class="col col-3">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image3">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image4">
</div>
</div>
Add position:relative to .img1-wrap and give a try.
When you make a element positioned absolute, Make sure its parent
is positioned relative
CSS
.img1-wrap {
display: block;
position: relative;
}
Is this what you want to achive Working Fiddle
Hope this helps..
It seems you are not using positioning the right way. Use relative for each element block with the text container.
You should restructure your HTML & CSS in such way:
.flex-container {
position: relative;
display: flex;
}
.img1-wrap {
position: relative;
overflow: hidden;
width: 200px;
}
.image {
width: 100%;
}
.overlay {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
/*width: 100%;*/
height: 20%;
transition: .5s ease;
}
.img1-wrap:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="flex-container">
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="img1-wrap">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</div>
Hope this helps and this is what you're trying to achieve.
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 have searched for similar questions however unfortunatley the left:50% soultion does not work here.
I have a container (.leftLanding) with a relative postion, inside this I have a div with an absolute position (.imageCenter) which I would like to center horizontally. Adding left: 50% doesn't actually center it however as the container has a with of 85% I also tried 42.5% but this didn't work either.
I've removed all unnecessary code.
HTML:
<div id="landing-images">
<div class="leftLanding left">
<div class="imageCover">
</div>
<div class="imageCenter">
Test
</div>
<img class="landingImage" src="assets/landingIMG1.png">
</div>
<div class="rightLanding right">
<div class="imageCover">
</div>
<div class="imageCenter">
Test
</div>
<img class="landingImage" src="assets/landingIMG3.png">
</div>
<div class="leftLanding left">
<div class="imageCover">
</div>
<div class="imageCenter">
Test
</div>
<img class="landingImage" src="assets/landingIMG2.png">
</div>
</div>
CSS:
.leftLanding {
display: flex;
position: relative;
width: 85%;
margin-left: 3%;
transition: all 0.5s ease;
}
.imageCenter {
position: absolute;
width: 25%;
height: 30%;
align-self: center;
z-index: 100;
}
If you add this rule, where flex: 1 tells the flex items (in this case the first div and the last img) to take all the available space (and since they are 2 they share it 50/50)
.leftLanding div:first-child,
.leftLanding img{
flex: 1;
}
And the use left: 50%, transform: translate(-50%) like this it will work
.imageCenter {
position: absolute;
width: 25%;
height: 30%;
align-self: center;
z-index: 100;
left: 50%;
transform: translate(-50%);
border: 1px solid gray;
}
Added borders on the two so it clearly shows
.leftLanding {
display: flex;
position: relative;
width: 85%;
margin-left: 3%;
transition: all 0.5s ease;
border: 1px solid gray;
}
.leftLanding div:first-child,
.leftLanding img{
flex: 1;
}
.leftLanding div:first-child {
background: lightblue;
}
.imageCenter {
position: absolute;
width: 25%;
height: 30%;
align-self: center;
z-index: 100;
left: 50%;
transform: translate(-50%);
border: 1px solid gray;
}
<div id="landing-images">
<div class="leftLanding left">
<div class="imageCover">
</div>
<div class="imageCenter">
Test
</div>
<img class="landingImage" src="http://placehold.it/150/f00">
</div>
<div class="rightLanding right">
<div class="imageCover">
</div>
<div class="imageCenter">
Test
</div>
<img class="landingImage" src="http://placehold.it/150/f00">
</div>
<div class="leftLanding left">
<div class="imageCover">
</div>
<div class="imageCenter">
Test
</div>
<img class="landingImage" src="http://placehold.it/150/f00">
</div>
</div>
To center an absolutely positioned element horizontally, use a combination of left: 50%; transform: translateX(-50%); and it will center it relative to it's closest non-static positioned ancestor.
Though I'm not sure what you're trying to do with this layout, so not sure if that's really what you're looking for, but added some borders/background colors to show the children are centered horizontally.
I have a container (.leftLanding) with a relative postion, inside this I have a div with an absolute position (.imageCenter) which I would like to center horizontally.
This will center .imageCenter in .leftLanding.
.leftLanding {
display: flex;
position: relative;
width: 85%;
transition: all 0.5s ease;
background: #aaa;
border: 1px solid blue;
}
.imageCenter {
position: absolute;
width: 25%;
height: 30%;
align-self: center;
z-index: 100;
left: 50%;
transform: translateX(-50%);
background: #eee;
border: 1px solid red;
}
<div id="landing-images">
<div class="leftLanding left">
<div class="imageCover">
</div>
<div class="imageCenter">
Test
</div>
<img class="landingImage" src="assets/landingIMG1.png">
</div>
<div class="rightLanding right">
<div class="imageCover">
</div>
<div class="imageCenter">
Test
</div>
<img class="landingImage" src="assets/landingIMG3.png">
</div>
<div class="leftLanding left">
<div class="imageCover">
</div>
<div class="imageCenter">
Test
</div>
<img class="landingImage" src="assets/landingIMG2.png">
</div>
</div>
Try to set the .imageCenter to width:100% and style display:block margin:auto to the img tag
.imageCenter {
position: absolute;
width: 100%;
height: 30%;
align-self: center;
z-index: 100;
}
img{
display: block;
margin: auto;
}
I have 3 images in a div that I need centered on my webpage. I need the 3 images centered with the main top image.
I believe the .container needs to be centered but I can not figure it out for the life of me! Thank you!
Here is the code I have made. All is working I just need the 3 images centered.
<h2 class="section-title desktop-12" style="text-align: center;"></h2>
<p><img src="//cdn.shopify.com/s/files/1/1317/8733/files/PHOTOGRFR_JoinTheTribe_1920x500_8f70f303-f8ac-4d6a-9c52-ae8cd939349d.jpg?v=1490462024" alt="Join The Tribe" /></p>
<p> </p>
<style><!--
.container { display: inline-block; position: relative; width: 30%; margin: auto; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #f03d41; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }
--></style>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Creative.jpg?5705585986642973725" alt="Creative" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Creative_Hover.jpg?5705585986642973725" alt="CreativeHover" class="image" /></div>
</div>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep.jpg?5705585986642973725" alt="Brand_Rep" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep_Hover.jpg?5705585986642973725" alt="Brand_RepHover" class="image" /></div>
</div>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer.jpg?5705585986642973725" alt="Influencer" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer_Hover.jpg?5705585986642973725" alt="InfluencerHover" class="image" /></div>
</div>
You have to add a wrapper div around your .container divs and then make that the same width as the image at the top and have it text-align center.
The style for this:
.container-wrapper {
text-align: center;
width: 1920px;
}
1920px comes from the image the top that you're trying to center under.
Here's a fiddle of this working
The html demonstrating the wrapper is:
<div class="container-wrapper">
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Creative.jpg?5705585986642973725" alt="Creative" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Creative_Hover.jpg?5705585986642973725" alt="CreativeHover" class="image" /></div>
</div>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep.jpg?5705585986642973725" alt="Brand_Rep" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep_Hover.jpg?5705585986642973725" alt="Brand_RepHover" class="image" /></div>
</div>
<div class="container"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer.jpg?5705585986642973725" alt="Influencer" class="image" />
<div class="overlay"><img src="https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer_Hover.jpg?5705585986642973725" alt="InfluencerHover" class="image" /></div>
</div>
</div>
The easiest way to achieve what you want with what you already have is to set text-align: center on a parent container of your .container divs. I've tided the code a little bit, but I've simple added a .container-wrapper that contains your centered elements and it should work as desired.
.container {
display: inline-block;
position: relative;
width: 30%;
margin: auto;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #f03d41;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.container-wrapper {
text-align: center;
}
<h2 class="section-title desktop-12" style="text-align: center;"></h2>
<p><img src=
"//cdn.shopify.com/s/files/1/1317/8733/files/PHOTOGRFR_JoinTheTribe_1920x500_8f70f303-f8ac-4d6a-9c52-ae8cd939349d.jpg?v=1490462024"
alt="Join The Tribe" /></p>
<p></p>
<div class="container-wrapper">
<div class="container">
<img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Creative.jpg?5705585986642973725"
alt="Creative" class="image" />
<div class="overlay"><img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Creative_Hover.jpg?5705585986642973725"
alt="CreativeHover" class="image" /></div>
</div>
<div class="container">
<img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep.jpg?5705585986642973725"
alt="Brand_Rep" class="image" />
<div class="overlay"><img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Brand_Rep_Hover.jpg?5705585986642973725"
alt="Brand_RepHover" class="image" /></div>
</div>
<div class="container">
<img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer.jpg?5705585986642973725"
alt="Influencer" class="image" />
<div class="overlay"><img src=
"https://cdn.shopify.com/s/files/1/1317/8733/files/Influencer_Hover.jpg?5705585986642973725"
alt="InfluencerHover" class="image" /></div>
</div>
</div>
To make center child element(s) set this style to their parent element:
.parent{
display: flex;
justify-content: center;
}
No need to display: block or margin: auto or position: absolute/relative ... for child element(s).
In your case wrap the .container divs in a parent div that said.