I am making a gallery and am stuck on a problem.
I want to have thumbnails of images next to eachother, in the center, I also want to have different groups which are under eachother.
Here's what I have: JsFiddle link.
How do I make group 1 and 2's images centered and next to eachother and how can I make group 2 under group 1?
Thanks in advance!
Here's the code without JsFiddle:
Html:
<html>
<head>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="css/lightbox.css" rel="stylesheet" />
</head>
<body>
Group 1: <br>
<div class="img">
<a href="img/een.jpg" data-lightbox="Group-1">
<img src="img/een.jpg" alt="Een" width="100" height="100">
</a>
</div>
<div class="img">
<a href="img/twee.jpg" data-lightbox="Group-1">
<img src="img/twee.jpg" alt="Twee" width="100" height="100">
</a>
</div>
<br>
Group 2: <br>
<div class="img">
<a href="img/drie.jpg" data-lightbox="Group-2">
<img src="img/drie.jpg" alt="Drie" width="100" height="100">
</a>
</div>
<div class="img">
<a href="img/vier.jpg" data-lightbox="Group-2">
<img src="img/vier.jpg" alt="Vier" width="100" height="100">
</a>
</div>
</body>
</html>
CSS:
div.img {
height: auto;
width: auto;
float: left;
}
div.img img {
display: inline;
margin: 5px;
opacity: 0.5;
}
div.img a:hover img {
opacity: 1;
}
Just wrap your groups in a div.
HTML
<div class="group">
Group 1: <br>
<div class="img">
<a href="img/een.jpg" data-lightbox="Group-1">
<img src="img/een.jpg" alt="Een" width="100" height="100">
</a>
</div>
<div class="img">
<a href="img/twee.jpg" data-lightbox="Group-1">
<img src="img/twee.jpg" alt="Twee" width="100" height="100">
</a>
</div>
</div>
CSS :
div.img {
display:inline-block;
}
DEMO
Example
Slightly amend your HTML and CSS to the below. Crucially you want to wrap your img within a parent element with text-align:center; set, you can accomplish this using e.g. the below (see here for centred titles):
Group 1:
<br>
<div class="img"> <a href="img/een.jpg" data-lightbox="Group-1">
<img src="img/een.jpg" alt="Een" width="100" height="100" />
</a>
<a href="img/twee.jpg" data-lightbox="Group-1">
<img src="img/twee.jpg" alt="Twee" width="100" height="100" />
</a>
</div>
Group 2:
<br>
<div class="img"> <a href="img/drie.jpg" data-lightbox="Group-2">
<img src="img/drie.jpg" alt="Drie" width="100" height="100" />
</a>
<a href="img/vier.jpg" data-lightbox="Group-2">
<img src="img/vier.jpg" alt="Vier" width="100" height="100" />
</a>
</div>
CSS
div.img {
text-align:center;
}
a {
text-decoration:none;
}
div.img img {
display: inline;
margin: 5px;
opacity: 0.5;
}
div.img a:hover img {
opacity: 1;
}
Here you can fit such a decision
DEMO
<div class="galleryItem">
<img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt="">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
.........
.container {
width: 80%;
margin: 30px auto;
overflow: hidden;
}
.galleryItem {
color: #797478;
font: 10px/1.5 Verdana, Helvetica, sans-serif;
float: left;
}
.galleryItem h3 {
text-transform: uppercase;
}
.galleryItem img {
max-width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.galleryItem {
color: #797478;
font: 10px/1.5 Verdana, Helvetica, sans-serif;
float: left;
width: 16%;
margin: 2% 2% 50px 2%;
}
/* MEDIA QUERIES*/
#media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
.galleryItem {width: 21%;}
}
#media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
.galleryItem {width: 29.33333%;}
}
#media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
.galleryItem {width: 46%;}
}
#media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
.galleryItem {width: 96%;}
.galleryItem img {width: 96%;}
.galleryItem h3 {font-size: 18px;}
.galleryItem p, {font-size: 18px;}
}
To centralize the images, place a wrapper div around them.
To ensure that group 2 is below group 1, you can either place a div with CSS clear property after the first group or use the CSS after selector to get the same effect without actually changing the html.
(In this sample code, I am inserting an extra div after the first group.)
HTML
Group 1:
<div class="img">
<a href="img/twee.jpg" data-lightbox="Group-1">
<img src="img/twee.jpg" alt="Twee" width="100" height="100" />
</a>
</div>
<br>
<div class='clearfix'></div>
Group 2: <br>
<div class="img">
<a href="img/drie.jpg" data-lightbox="Group-2">
<img src="img/drie.jpg" alt="Drie" width="100" height="100" />
</a>
</div>
<div class="img">
<a href="img/vier.jpg" data-lightbox="Group-2">
<img src="img/vier.jpg" alt="Vier" width="100" height="100" />
</a>
</div>
</body>
</html>
CSS
div.img {
height: auto;
width: auto;
float: left;
text-align:center;
}
div.img img {
display: inline;
margin: 5px;
opacity: 0.5;
}
div.img a:hover img {
opacity: 1;
}
div.clearfix{
clear:both;
}
(Please note that you should always use a slash before closing the img tag)
Related
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>
<section>
<style>
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;
}
* {
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;
}
</style>
<div class="responsive">
<div class="img">
<a target="_blank" href="img\aviary-image-1479454871589.jpeg">
<img src="/img/aviary-image-1479454871589.jpeg" alt="A Boeing 747-400 descending" width="300" height="200">
</a>
<div class="desc">A Boeing 747-400 descending</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img\Screenshot_2016-11-18-13-30-35-973.jpg">
<img src="/img/Screenshot_2016-11-18-13-30-35-973.jpg" alt="Boeing 787-9 touching down" width="600" height="400">
</a>
<div class="desc">Boeing 787-9 touching down</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img\Slack for iOS Upload.jpg">
<img src="/img/Slack for iOS Upload.jpg" alt="Boeing 777-200ER climbing" width="600" height="400">
</a>
<div class="desc">A Boeing 777-200ER climbing</div>
</div>
</div>
</section>
Please note, that this is only a section of the page, that is why there are no starting tags etc.
For some reason, my gallery is not loading. The images are uploaded, but none of the gallery is showing up on the site. You can look at the site here: https://britishairways.000webhostapp.com/photos.html
Anything I'm doing wrong?
Thank you!
Make your <section> in which your gallery items are located a flex container. Just like:
section {
display: flex;
}
Visual Reference:
The section holding the three gallery images has zero height. This, in turn, is because the gallery images have float:left, which takes them out of the layout flow and causes their parent not to use their size in calculating its height.
See How do you keep parents of floated elements from collapsing?
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;
I'm trying to make a layout like this. All the banners have static dimensions and a bottom margin. And the article needs padding. The problem is the value of the width property of article. After locating the banners, I want to give the rest of the entire page width to article element. Here is my code:
#SidePane {
display: inline-block;
float: left;
}
.SideBanner {
display: block;
width: 250px;
height: 157px;
margin: 0 0 5px 0;
}
#SiteEye {
width: ???????????????????????;
height: 700px;
padding: 10px;
color: #4F2412;
background-color: #F9F6F4;
display: inline-block;
}
<div id="SiteCenter">
<div id="SiteEye">
<h1>title</h1>
<p>p1</p>
<p>p2</p>
</div>
<div id="SidePane">
<a href="">
<img class="SideBanner" src="images/banners/b1.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b2.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b3.jpg" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="images/banners/b4.jpg" alt="banner1" />
</a>
</div>
</div>
You may use calc method:
width: calc(100% - 250px);
See can i use calc? before using it for it's browser compatibility.
RE: Comment on Bhojendra's answer
There is another way, it involves using box-sizing:border-box;, one of the most useful additions to CSS, like, ever!
I've also updated your images to use a top padding on all except the first one because you were causing some white-space at the bottom of the page with the previous method.
* {
box-sizing:border-box; /* Make all height/width inclusive of padding and border */
}
body {
margin:0;
padding:0;
}
#SidePane {
display: inline-block;
float: left;
}
.SideBanner {
display: block;
width: 250px;
height: 175px;
padding: 5px 0 0 0;
}
#SidePane a:first-child .SideBanner {
padding:0;
}
#SiteEye {
width: calc(100% - 250px);
height: 700px;
color: #4F2412;
background-color: #F9F6F4;
display: inline-block;
padding:10px;
}
<div id="SiteCenter">
<div id="SiteEye">
<h1>title</h1>
<p>p1</p>
<p>p2</p>
</div>
<div id="SidePane">
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
<a href="">
<img class="SideBanner" src="http://placehold.it/250x170" alt="banner1" />
</a>
</div>
</div>
I am building a website using wordpress theme. I have two elements (one floated left, second floated right) in the footer. I need to make it centered (the second one below the first one) when I resize the browser window. I tried giving the <p> and <div> tag a class and then style it to float:none; - hovewer you cann check that It didn't really work on the webpage. I also attach a picture of how I want it to be..
WEBPAGE
<div class="site-info">
<div style="margin:0 auto; width: 75%;">
<p style="float:left;">© Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
<div style="float:right;">Naleznete nás na sociálních sítích:
<a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a>
<a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a>
</div>
<div class="clear"></div>
</div>
</div><!-- .site-info -->
Here is updated code. with a screen less than 600px, the divs will go on top of each other. This probably will need tweaking to fit on your site.
#left {
float: left;
}
#right {
float: right;
}
#center {
text-align: center;
}
#container {
margin-left: 12.5%;
margin-right: 12.5%;
}
.imagefloat {
display: block;
float: right;
margin: -4px 5px 0 5px;
}
#media (max-width: 600px) {
.nofloat {
width: 100%!important;
text-align: center;
float: none!important;
}
.imagefloat {
float: none!important;
}
}
<div class="site-info">
<div id="container">
<div id="left" class="nofloat">© Copyright
<?=d ate( 'Y'); ?>Hotel Švýcarský Dům</div>
<div id="right" class="nofloat">
<a class="imagefloat" href="">
<img src="/wp-content/themes/adamos/images/gplus.png" />
</a>
<a class="imagefloat" href="">
<img src="/wp-content/themes/adamos/images/facebook.png" />
</a>
</div>
<div id="center">Naleznete nás na sociálních sítích:</div>
<div class="clear"></div>
</div>
</div>
Perhaps add align-text:center to one of the divs and a p tag to put the images on a new line
<div class="site-info">
<div style="text-align:center; width: 75%;">
<p >© Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
<div >Naleznete nás na sociálních sítích:
<p><img src="/wp-content/themes/adamos/images/gplus.png" />
<img src="/wp-content/themes/adamos/images/facebook.png" />
</div>
<div class="clear"></div>
</div>
</div>
Firstly, you kept your float:left and float:right as inline styling so you will need to move the left and right float to an external css as you can't override inline styling with just css.
Secondly, Add a separate class for the left and right, say class="float-left" and class="float-right" and then use media query to switch properties for the classes like this:
#media (max-width: 768px) {
.float-left {
float: none;
}
.float-right {
float: none;
}
}
#media (min-width: 769px) {
.float-left {
float: left;
}
.float-right {
float: right;
}
}
Thirdly, to center the footer text on smaller screens, just add text-align: center to the above media query like this:
#media (max-width: 768px) {
.site-info {
text-align: center;
}
.float-left {
float: none;
}
.float-right {
float: none;
}
}
Lastly, add the icons and text within a <p></p> tag so they will line-break accordingly.