There are seven images of different size and I want to put all the images below the big image. Can any one please help me to solve this?
.imagelist img{
width: 100px;
border: 2px solid black;
font-size: 0;
}
<div class="wrapper">
<img src="images/wide.jpg" width="100%" alt="wide-image">
</div>
<div class="imagelist">
<img src="images/a.jpg" width="100px;">
<img src="images/b.jpg" width="100px;">
<img src="images/c.jpg" width="100px;">
<img src="images/d.jpg" width="100px; height:90px;">
<img src="images/e.jpg" width="100px;">
<img src="images/f.jpg" width="100px;">
<img src="images/g.jpg" width="100px;">
</div>
You can use the following solution:
.imagelist img {
float:left;
width:calc(100% / 7 - 4px);
border:2px solid black;
font-size:0;
}
.imagelist {
clear:both;
}
<div class="wrapper">
<img src="http://placehold.it/350x350" width="100%" alt="wide-image">
</div>
<div class="imagelist">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
<img src="http://placehold.it/350x350">
</div>
Related
I know there are several threads on the "overlapping images" topic, but I can't find one that addresses my specific problem.
I have five circular images and I need to display them with slight overlap, kind of like how a deck of cards looks when it's laid out in a fan.
Here is what it should look like:
Here is what I currently have:
All the code examples I've found are aimed at overlapping two square images and I can't figure out how to translate to this scenario. Any help would be greatly appreciated.
I've tried messing around with grid layout and negative margins, but it was just a huge mess.
I can't share the source code but I've recreated the exact same HTML/CSS with dummy data in this codepen.
Code:
.main-container {
height: fit-content;
padding-top: 3rem;
}
#icons-container {
display: flex;
position: relative;
justify-content: center;
}
.icon {
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid white;
}
<div class="main-container">
<div id="icons-container">
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon1" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon2" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon3" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon4" />
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon5" />
</div>
</div>
</div>
You can use margin-right/margin-left on the icon . To overlap, let margin-right have negative values
.main-container {
height: fit-content;
padding-top: 3rem;
}
#icons-container {
display: flex;
position: relative;
justify-content: center;
}
.icon {
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid white;
margin-right: -15px;
}
<div class="main-container">
<div id="icons-container">
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon1">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon2">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon3">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon4">
</div>
<div class="single-icon-container">
<img src="https://randomwordgenerator.com/img/picture-generator/50e4d646434faa0df7c5d57bc32f3e7b1d3ac3e45551784c722f78d79e_640.jpg" alt="" class="icon" id="icon5">
</div>
</div>
</div>
I am working with the code below from w3schools to make a gallery. The problem I have is that if one item has a rather long description it causes the items below to become disordered and not line up properly.
As far as I can tell this can be solved by making the item boxes either all the same height or by having a set gap between each row from the bottom of the tallest on the top row to the top of all three on the bottom row. I do not know how to do either of these.
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="overflow: hidden;">
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_5terre.jpg">
<img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here and make it really long to see what happens</div>
</div>
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_forest.jpg">
<img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_lights.jpg">
<img src="https://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_mountains.jpg">
<img src="https://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>
Does anyone have a solution to how they can be kept inline neatly?
display:flex offers a really neat way to organise items like this. You can have everything stretch to the same height as the tallest item in it's row, or you can align them in a bunch of different ways with only a few lines of code to the parent container.
For more info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.gallery-container {
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
/*float: left;*/
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="gallery-container">
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_5terre.jpg">
<img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here and make it really long to see what happens</div>
</div>
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_forest.jpg">
<img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_lights.jpg">
<img src="https://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_mountains.jpg">
<img src="https://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>
The answer above works well and I want to add one more thing to it. If you want to align the description vertically, you can again use the Flexbox. I have added it in the CSS code here.
.gallery-container {
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
width: 180px;
/* To align the description both horizontally and vertically*/
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="gallery-container">
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_5terre.jpg">
<img src="https://www.w3schools.com/css/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here and make it really long to see what happens</div>
</div>
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_forest.jpg">
<img src="https://www.w3schools.com/css/img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_lights.jpg">
<img src="https://www.w3schools.com/css/img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="https://www.w3schools.com/css/img_mountains.jpg">
<img src="https://www.w3schools.com/css/img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>
<div class="section-cm director-general-section">
<h2 class="widget-title section-cm-heading heading--center">Director General</h2>
<img width="140" height="160" class="image wp-image-183 attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
<div class="textwidget custom-html-widget">Director</div>
<div class="textwidget custom-html-widget">hello</div>
</div>
How can I apply different CSS to .custom-html-widget DIV? I am unable to add a unique class to the DIVs.
You can try out the following code
.custom-html-widget:nth-of-type(1){
color:red;
}
Now if you've many no of div or li item you can simply use the nth-type rule..
Used + selector if your div come one by one
.custom-html-widget {
color: red;
}
.custom-html-widget + .custom-html-widget {
color: blue;
}
<div class="section-cm director-general-section">
<h2 class="widget-title section-cm-heading heading--center">Director General</h2>
<img width="140" height="160" class="image wp-image-183 attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
<div class="textwidget custom-html-widget">
Director
</div>
<div class="textwidget custom-html-widget">hello</div>
</div>
or Used :first-of-type and :last-child
.custom-html-widget:first-of-type {
color: red;
}
.custom-html-widget:last-child {
color: blue;
}
<div class="section-cm director-general-section">
<h2 class="widget-title section-cm-heading heading--center">Director General</h2>
<img width="140" height="160" class="image wp-image-183 attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
<div class="textwidget custom-html-widget">
Director
</div>
<div class="textwidget custom-html-widget">hello</div>
</div>
you can use pseudo-class to do that. for more information you can checkout this document.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child
or you can search on google about pseudo-class in css.
div.custom-html-widget:first-child(){}
To change property of the first child, otherwise for the second :
div.custom-html-widget:nth-child(2){}
You can use :nth-child:
.custom-html-widget:nth-child( 3 ) {
background-color: gold;
}
.custom-html-widget:nth-child( 4 ) {
background-color: rebeccapurple;
}
<div class="section-cm director-general-section">
<h2 class="widget-title section-cm-heading heading--center">Director General</h2>
<img width="140" height="160" class="image wp-image-183 attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
<div class="textwidget custom-html-widget">Director</div>
<div class="textwidget custom-html-widget">hello</div>
</div>
This works by selecting the third and fourth child element of .section-cm.
You can use :nth-of-type:
.custom-html-widget:nth-of-type( 1 ) {
background-color: red;
}
.custom-html-widget:nth-of-type( 2 ) {
background-color: green;
}
<div class="section-cm director-general-section">
<h2 class="widget-title section-cm-heading heading--center">Director General</h2>
<img width="140" height="160" class="image wp-image-183 attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
<div class="textwidget custom-html-widget">Director</div>
<div class="textwidget custom-html-widget">hello</div>
</div>
This works because we're selecting the first and second instances of the type of element .custom-html-widget happens to be, which is a div.
You can use :first-of-type() and :last-of-type():
.custom-html-widget:first-of-type {
background-color: seagreen;
}
.custom-html-widget:last-of-type {
background-color: orange;
}
<div class="section-cm director-general-section">
<h2 class="widget-title section-cm-heading heading--center">Director General</h2>
<img width="140" height="160" class="image wp-image-183 attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
<div class="textwidget custom-html-widget">Director</div>
<div class="textwidget custom-html-widget">hello</div>
</div>
This works because there's only two DIVs and you're selecting the first and last ones.
There's a few other too like :last-child and :nth-last-of-type().
I am trying to done is have a responsive div with 2 pictures centered, one in each div.
What I am want it is to drop down, when the screen is small and not big enought to display them side by side.
At the moment with the below when the screen is smaller it pushes the images into each other.
<style>
.container{width:100%}
.inner_container{float:left;width:50%;}
.img_container{width:250px;margin:0 auto:padding-bottom:5px;}
</style>
<div class="container">
<div class="inner_container">
<div class="img_container">
<img src="left_img.png" width="250" height="70" alt="" border="0">
</div>
</div>
<div class="inner_container">
<div class="img_container">
<img src="right_img.png" width="250" height="70" alt="" border="0">
</div>
</div>
</div>
You're using the wrong styles to do what you're trying to do. Mainly, you've set a fixed width of 250px to your img_container div which is why the images aren't getting scaled down. This the correct way to achieve what you want:
.container {
width: 100%
}
.inner_container {
width: 49%;
display: inline-block;
}
.img_container {
width: 100%;
}
.img_container a img {
width: 100%;
}
<div class="container">
<div class="inner_container">
<div class="img_container">
<a href="http://www.google.co.uk">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</a>
</div>
</div>
<div class="inner_container">
<div class="img_container">
<a href="http://www.google.com">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</a>
</div>
</div>
</div>
With the above code, the images keep on getting scaled down and stay on the same line until the window size is reduced to very small. If you would want them to appear on two separate lines after a particular width, you will need to use media-queries like this:
.container{width:100%}
.inner_container { width: 49%; display: inline-block; }
.img_container { width: 100%; }
.img_container a img { width: 100%; }
#media (max-width: 650px) {
.inner_container { width: 100%; display: block; }
}
<div class="container">
<div class="inner_container">
<div class="img_container">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</div>
</div>
<div class="inner_container">
<div class="img_container">
<img src="http://lorempixel.com/400/200/" width="250" height="70" alt="" border="0">
</div>
</div>
</div>
Set a min-width on the .inner_container
.container {
width:100%;
overflow: hidden;
}
.inner_container {
float:left;
width:50%;
min-width: 250px;
}
.img_container {
width:250px;
margin:0 auto;
padding-bottom:5px;
text-align: center;
}
http://jsfiddle.net/63pnotjc/
When I posted my reply, I didn't notice Fahad, Show code snippet link.
Thank you both for your help, this is the css code I went with in the end.
.container{width:100%;overflow:hidden;}
.inner_container{display:inline-block;width:49%;}
.img_container{width:250px;margin:0 auto;text-align:center;padding-bottom:5px;}
#media (max-width:501px){
.inner_container{display:block;width:100%;}
}
Once again thank you both for your help :)
I'm trying to add some hover effect on some images I got.
<div id="horizontal_list">
<div class="grid_3 first overlay">
<a href="#">
<img border="0" alt="first" src="path">
</a>
</div>
<div class="grid_3 overlay">
<a href="#">
<img border="0" alt="first" src="path">
</a>
</div>
</div>
When I hover the div with the overlay class I want another image to hover on top of the imagetag..
I've got the following css:
#horizontal_list{
margin-top: 18px;
height: 330px;
}
.grid_3{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.first{
margin-left: 0px !important;
}
.last{
margin-right: 0px !important;
}
.overlay{
height: 330px;
}
.overlay:hover{
background: url('path') no-repeat;
}
I'm not sure what you mean by 'imagetag' but here is what I think you mean:
What you can do, is adding the second image in your html:
<div id="horizontal_list">
<div class="grid_3 first overlay">
<a href="#">
<img class="first_img" border="0" alt="first" src="path">
<img class="sec_img" border="0" alt="second" src="path">
</a>
</div>
<div class="grid_3 overlay">
<a href="#">
<img class="first_img" border="0" alt="first" src="path">
<img class="sec_img" border="0" alt="second" src="path">
</a>
</div>
</div>
And in your CSS:
.overlay {position: relative;}
.overlay:hover a img.sec_img {display: none;}
.overlay:hover a img.sec_img {
display: block;
position: absolute;
background: url(path) no-repeat;
top: 0;
left: 0;
width: [imgwidth]px;
height: [imgheight]px;
}
Be sure to change [imgwidth] and [imgheight] into the correct dimensions.
HTML
<div class="hoverholder">
<a href="#" class="picone">
<img src="#" alt="" />
</a>
<a href="#" class="pictwo">
<img src="#" alt="" />
</a>
</div>
CSS
.pictwo {display:none;}
.hoverholder:hover .picone{
display:none;
}
.hoverholder:hover .pictwo{
display:block;
}