I'm trying to align two images side by side - pair after pair down by landing page on wide screen and single image - one after another on mobile screen layout:
<div class="container">
<div class="set">
<div class="column">
<img src="" id="img3" class="images">
</div>
<div class="column">
<img src="" id="img4" class="images">
</div>
<div class="column">
<img src="" id="img5" class="images">
</div>
<div class="column">
<img src="" id="img6" class="images">
</div>
</div>
</div>
container css:
.container {
height: relative;
padding: 0px 12px;
margin-top:0px;
margin-bottom:0px;
border-radius: 0px;
background-color: transparent;
}
set and column css:
* {
box-sizing: border-box;
}
.set {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
images css:
.images {
position: relative;
width: 100%;
height: auto;
padding: 23px;
}
Actual result is a scalable images in one line with both screen layouts, left is a wide screen, right is mobile:
but I'm trying to get this result:
You just need to give one more parameter in your css file
#media screen and (max-width:768px){
.set{display:block}
}
Related
I set out to create a float based grid system and have added gutters between columns via padding: 0 0.75em; applied to columns with margin-right: -0.75em; and margin-left: -0.75; applied to rows.
When I have a full width container it renders outside the width of the viewport with the horizontal scrollbarr showing.
I want the leftmost and the rightmost element to stick along the edges of the viewport, but still want to preserve the gutters between elements. I must be missing something. Any help would be appreciated, thank you!
Here's CSS followed by HTML:
.container-full {
width: 100%;
}
.row {
margin-right: -0.75em;
margin-left: -0.75em;
}
.row::before,
.row::after {
display: block;
content: "";
clear: both;
}
[class*="column-"] {
float: left;
padding-right: 0.75em;
padding-left: 0.75em;
}
<div class="container-full">
<div class="row">
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img01.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img02.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img03.jpg" alt="Image">
</div>
</div>
<div class="column-3">
<div class="exhibition-brief">
<img src="./img/img04.jpg" alt="Image">
</div>
</div>
</div>
</div>
You can achieve this via using CSS Grid and the grid-gap property.
<div class="container">
<img src="https://picsum.photos/1920/1080" alt="">
<img src="https://picsum.photos/1920/1081" alt="">
<img src="https://picsum.photos/1920/1082" alt="">
<img src="https://picsum.photos/1920/1083" alt="">
</div>
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 0.75rem;
}
img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
I want to apply text over image on hover to every picture without it messing up elements container.
I've tried THIS and solutions similar, but It doesn't work for me.
This is what I have.
/*CSS*/
.item {
display: inline-block;
}
img {
padding-right: 10px;
}
.kulso {
text-align: center;
padding-top: 20px;
}
.kulso2 {
text-align: center;
}
<!--HTML-->
<div class="kulso">
<div class="item">
<img src="./img/long_macchiato.jpg" width="300px" height="200px" />
<p>Long Macchiato</p>
</div>
<div class="item">
<img src="./img/longblack.jpg" width="300px" height="200px" />
<p>Long Black</p>
</div>
<div class="item">
<img src="./img/café latte.jpg" width="300px" height="200px" />
<p>Café Latte</p>
</div>
<div class="item">
<img src="./img/ristretto.jpg" width="300px" height="200px" />
<p>Ristretto</p>
</div>
</div>
<div class="kulso2">
<div class="item">
<img src="./img/Cappuccino.jpg" width="300px" height="200px" />
<p>Capuccino</p>
</div>
<div class="item">
<img src="./img/flat-white.jpg" width="300px" height="200px" />
<p>Flat White</p>
</div>
<div class="item">
<img src="./img/mocha-coffee.jpg" width="300px" height="200px" />
<p>Mocha Coffee</p>
</div>
<div class="item">
<img src="./img/affogato.jpg" width="300px" height="200px" />
<p>Affogato</p>
</div>
</div>
Demo site:
https://peaceful-carson-9d2ad7.netlify.com/products.html/
I understad I have to have a wrapper around each image and caption. My problem is, no matter what properties I'm modifying or adding while trying to apply the text over image on hover using THIS, either...
"inline-block" is off, the pictures won't stay next to each other
opacity, transition affects padding between pictures
the text is in the center of the page, not the picture
the size of the pictures change
I noticed that adding
<div class="text">This is the text that appears on hover in the center of the image</div>
instantly messes up everything.
Please give me tips or solutions using my code I shared above!
You have to have a wrapper around each image and caption, much like the examples you link to. You can modify this a bit as the css could be a bit cleaner but this is the basic thing you can do.
.container {
padding-bottom: 20px;
}
.container__row {
display: flex;
}
img {
max-width: 100%;
display: inline-block;
padding-bottom: 10px;
}
/* For medium devices (e.g. tablets) */
#media (min-width: 420px) {
.image-container {
max-width: 48%;
}
}
/* For large devices (e.g. desktops) */
#media (min-width: 760px) {
.image-container {
max-width: 24%;
}
}
.egykispadding {
padding-top: 20px;
}
.image-container {
position: relative;
max-width: 400px;
}
.image-container__caption {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: deepskyblue;
color: white;
font-size: 2rem;
opacity: 0;
visibility: hidden;
transition: opacity 140ms;
}
.image-container:hover .image-container__caption {
opacity: 1;
visibility: visible;
}
<div class="container">
<div class="container__row egykispadding">
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
</div>
<div class="container__row">
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
<div class="image-container">
<img src="https://www.stickpng.com/assets/images/580b585b2edbce24c47b2c8c.png" width="400" height="200" />
<div class="image-container__caption">Image caption</div>
</div>
</div>
You can try this:
<div id='hover2change' style="background-image:url('a.png');width:50px;height:50px;">
<img src="b.png" style="position:absolute;top:0px;left:0px;width:50px;">
</div>
<style>
#hover2change:hover img {left:-100%;}
</style>
I have a div with 5 rows and with multiple images in it. The Html looks something like this:
<div id="row3" class="row">
<div id="im15" class="column">
<img src="img/img15.jpg" alt="movie">
</div>
<div id="im16" class="column">
<img src="img/img16.jpg" alt="movie">
</div>
<div id="im17" class="column">
<img src="img/img17.jpg" alt="movie">
</div>
<div id="im18" class="column">
<img src="img/img18.jpg" alt="movie">
</div>
<div id="im19" class="column">
<img src="img/img19.jpg" alt="movie">
</div>
<div id="im20" class="column">
<img src="img/img20.jpg" alt="movie">
</div>
<div id="im21" class="column">
<img src="img/img21.jpg" alt="movie">
</div>
</div>
I have them side by side and my css looks like this:
html, body {
background-color: #222222;
overflow: hidden;
}
.column {
float: left;
}
.column img {
width: 200px;
height: 300px;
padding: 1px;
}
.images {
opacity: 0.4;
}
.row {
clear: both;
display: table;
}
It works and displays all images properly stacked with no left space in my screen size laptops, but for bigger screens this fails.
I am not able to understand how can I resize these many images to fit and leave no space for any screen size.
I would appreciate any help.
Try to use grid system.
grid-template-columns defines how many columns you want to divide, in the flowing example I divide 3 columns with the value 1fr 1fr 1fr.
grid-gap defines the gaps between each grids.
More information about css grid system, you can refer to this Youtube video:
https://www.youtube.com/watch?v=jV8B24rSN5o&t=1325s&frags=pl%2Cwn
It's very useful when doing some layouts with CSS.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
}
.box {
border: 1px solid teal;
}
.box img {
width: 100%;
height: 100%;
}
<div class="container">
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
</div>
Note : This is code for 3 images side by side horizontally
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
I have the following HTML structure currently:
<div id="image" style="margin: 20px;">
<h5>
<span>DriverName1</span>
<span>DriverName2</span>
</h5>
<img src=/>
<img src= />
</div>
I am trying to make the images appear side by side which they are doing, but the headers for drivername1 and drivername2 are appearing right next to each other over the same image. How do I make these spans match up with the top left edge of each image? I tried adding separate headers over each image but that makes the images go vertically one on top of the other then.
you can consider using display:flex for this
check the following snippet
div{
display:flex;
}
.image {
display: flex;
flex-direction: column;
border:1px solid;
margin-left:10px;
}
img {
width: 100px;
height: 100px;
}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Non-flex solution
div * {
display: inline-block;
}
.image {
border: 1px solid;
margin-left: 10px;
}
img {
width: 100px;
height: 100px;
display: table-cell;
}
header {}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Hope this helps
This seems like a simple problem, but I can't crack it. I'm trying to set up a responsive image gallery much like the one demonstrated at W3Schools. That gallery looks fine--until you change the length of the captions. Then the height of the boxes starts to vary, and the arrangement of the gallery gets all screwed up. How can I set the height of those boxes so they line up neatly, even when the captions range from, say, 2-4 lines long?
One thing that you can do is, you can give a min-height and make it fixed height.
div.desc {
padding: 15px;
text-align: center;
min-height: 50px;
}
Snippet:
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
min-height: 50px;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
#media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
</div>
You can do 2 things. Put both of these on the class applied to each block.
overflow-y: hidden; //Or scroll if you want...
max-height: 400px;