I need to add centre text on multiple images of different sizes within their own tags in a container div.
This is how my HTML and CSS is setup
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<img class="sports" src="img/block1Sports.jpg">
<h3 class="text1" >Sports</h3>
<img id="wellness" src="img/block2Wellness.jpg">
<h3 class="text1" >wellness</h3>
<img id="expeditions" src="img/block3Expeditions.jpg">
<h3 class="text1" >expeditions</h3>
<img id="games" src="img/block4Games.jpg">
<h3 class="text1" >games</h3>
<img id="culture" src="img/block5Culture.jpg">
<h3 class="text1" >culture</h3>
<img id="beauty" src="img/block6Beauty.jpg">
<h3 class="text1" >beauty</h3>
<img id="travelling" src="img/block7Travelling.jpg">
<h3 class="text1" >travelling</h3>
</div>
</div>
</div>
</section>
All these images have a single text messages which should all be centred, appreciate your help.
Here is a snap example of desired output
Instead of <img>, put your image in a div container using css background-image:url('');. Then use display:flex; (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) on this div to position your text vertically and horizontally centered.
HTML
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<div class="imageWithCenteredText sports">
<h3 class="text1" >Sports</h3>
</div>
</div>
</div>
...
</div>
</section>
CSS
.imageWithCenteredText {
display:flex;
justify-content: center;
align-items: center;
}
.sports {
background-image: url('img/block1Sports.jpg');
width: 500px; /* PICTURE WIDTH */
height: 500px; /* PICTURE HEIGHT */
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.gallery-item {
position: relative;
}
.gallery-item img {
width: 100%;
}
.gallery-item h3 {
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<div class="gallery-item">
<img class="sports" src="img/block1Sports.jpg">
<h3 class="text1" >Sports</h3>
</div>
<div class="gallery-item">
<img id="wellness" src="img/block2Wellness.jpg">
<h3 class="text1" >wellness</h3>
</div>
<div class="gallery-item">
<img id="expeditions" src="img/block3Expeditions.jpg">
<h3 class="text1" >expeditions</h3>
</div>
<div class="gallery-item">
<img id="games" src="img/block4Games.jpg">
<h3 class="text1" >games</h3>
</div>
<div class="gallery-item">
<img id="culture" src="img/block5Culture.jpg">
<h3 class="text1" >culture</h3>
</div>
<div class="gallery-item">
<img id="beauty" src="img/block6Beauty.jpg">
<h3 class="text1" >beauty</h3>
</div>
<div class="gallery-item">
<img id="travelling" src="img/block7Travelling.jpg">
<h3 class="text1" >travelling</h3>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Related
I started learning web programming and i want to test some features but there is a problem, when I bring the mouse on the above photos, the bottom ones change place like in the photo. The photos below are on the left in the first opening, while hovering on the top one, it shifts to the right.
Like this:
*{
box-sizing: border-box;
}
#gallery{
width: 1200px;
margin: 20px auto;
}
.item-container{
width: 25%;
float: left;
padding: 10px;
}
.gallery-item{
border: 1px solid #ccc;
transition: border 0.4s linear;
}
.gallery-item:hover{
border: 3px solid #777;
cursor: pointer;
}
.gallery-item img{
width: 100%;
height: 200px;
object-fit: contain;
background-color: #DCDCDC;
}
.description{
text-align: center;
padding: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Art Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/1.jpg" target="_blank">
<img src="img/1.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/2.jpg" target="_blank">
<img src="img/2.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/3.jpg" target="_blank">
<img src="img/3.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/4.jpg" target="_blank">
<img src="img/4.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/5.jpg" target="_blank">
<img src="img/5.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/6.jpg" target="_blank">
<img src="img/6.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
</body>
</html>
How can i fix it?
Updated answer
Add outline instant of border
The problem with your border hover css
From
.gallery-item:hover{
border: 3px solid #777;
cursor: pointer;
}
To
.gallery-item:hover{
border: 1px solid #777;
cursor: pointer;
}
*{
box-sizing: border-box;
}
#gallery{
width: 1200px;
margin: 20px auto;
}
.item-container{
width: 25%;
float: left;
padding: 10px;
}
.gallery-item{
outline: 1px solid #ccc;
transition: border 0.4s linear;
}
.gallery-item:hover{
outline: 3px solid #777;
cursor: pointer;
}
.gallery-item img{
width: 100%;
height: 200px;
object-fit: contain;
background-color: #DCDCDC;
}
.description{
text-align: center;
padding: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Art Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/1.jpg" target="_blank">
<img src="img/1.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/2.jpg" target="_blank">
<img src="img/2.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/3.jpg" target="_blank">
<img src="img/3.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/4.jpg" target="_blank">
<img src="img/4.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/5.jpg" target="_blank">
<img src="img/5.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/6.jpg" target="_blank">
<img src="img/6.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
I have a <section> tag in which there are 3 images. How can I center them for fullscreens?
The size of my screen is 22.9 ".
here is the code:
<section class="gallery">
<div class="container-fluid">
<div class="row">
<div class="fw mix-container home-gallery">
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-002.jpg""/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-003.jpg""/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-004.jpg""/>
</div>
</div>
</div>
</div>
</div>
Thank you for your answers
Best regards.
I have included a code snippet below that will run.
Essentially you make the images inline-block so they sit next to each other.
Then you can set the images parent container to be left 50%, and offset it with transform:translate();
You can change the width of the images as needed but the same logic should still apply.
.mix {
width: 200px;
height: 100px;
border: black solid 1px;
display: inline-block;
}
.mix-container {
position: relative;
display: inline-block;
left: 50%;
transform: translate(-50%, 0);
}
<section class="gallery">
<div class="container-fluid">
<div class="row">
<div class="fw mix-container home-gallery">
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-002.jpg"/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-003.jpg"/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-004.jpg"/>
</div>
</div>
</div>
</div>
</div>
</section>
I have a layout like this:
body {
text-align: center;
}
.link {
position: relative;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 100%;
background-color: #263238;
color: #1DE9B6;
opacity: 0;
visibility: hidden;
}
.link:hover .info {
opacity: 1;
visibility: visible;
}
.col-md-3 {
margin-bottom: 30px;
}
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
</div>
</div>
When the layout gets small, and only one column is displayed horizontally, the div which is supposed to show on hover gets as big as the column, but I only want it to be as big as the fluid image. How would I need to achieve this?
Here is the codepen link: https://codepen.io/Kestvir/pen/gKVwLe
Just add display: inline-block to the link element
.link {
position: relative;
display: inline-block;
}
Or you can also add d-inline-block position-relative classes on the .link elements .
body {
text-align: center;
}
.link {
position: relative;
display: inline-block;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 100%;
background-color: #263238;
color: #1DE9B6;
opacity: 0;
visibility: hidden;
}
.link:hover .info {
opacity: 1;
visibility: visible;
}
.col-md-3 {
margin-bottom: 30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
<div class="col-md-3">
<div class="link">
<img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
<div class="info">Info</div>
</div>
</div>
</div>
</div>
I have searched through almost every question asked about spacing between bootstrap columns but nothing seems to work. I'm thinking it could be a simple rookie mistake with the way I have structured my html/css but I can't seem to figure it out.
I've worked with bootstrap many times before but using a theme, this is my first time however only using a simple bootstrap navbar template with nothing else inside.
.img-container{
position: relative;
display: inline-block;
}
.img-container .overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.1);
}
.img-container:hover .overlay{
display: block;
background-color: rgba(0,0,0,0.6);
}
.img-container .overlay .services-caption{
color: #fff;
font-size: 100px;
position: absolute;
top: 25%;
left: 20%;
}
<!--Services-->
<section class="services">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>
</div>
</div>
</section>
Add bootstrap col-md-offset-* class to achieve spacing between columns.
<div class="col-md-4 col-md-offset-1">
The above code will create a gap of 1 column size.
You can try padding, put test class on each <div class="col-md-4 test">
<style>
.test {
padding-bottom: 10px;
}
</style>
<div class="col-md-4 test">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>
You can add a class called img-responsive. It will make the image responsively.
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" class="img-responsive" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>
I'm trying to build a simple image gallery where the gallery items are placed in a div. But since the items are floated left, they don't center align overall when I add text-align: center; to the parent div. (I'm using Bootstrap 3 and parent div is panel-body. The contents lie in panel-body.)
CSS:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css" media="screen">
.image-box {
float: left;
}
.image-box img {
width: 128px;
height: 128px;
}
</style>
HTML:
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">GALLERY</h3>
</div>
<div class="panel-body">
<div class="image-box">
<img src="member-icon.png">
<P class="caption">Image Description</P>
</div>
<div class="image-box">
<img src="member-icon.png">
<P class="caption">Image Description</P>
</div>
<div class="image-box">
<img src="member-icon.png">
<P class="caption">Image Description</P>
</div>
</div>
</div>
text-align: center; will not work when use floating. use inline block.
Please see code below
.panel-body {
text-align: center;
}
.image-box {
display: inline-block;
margin-left: -4px;
}
.image-box img {
width: 128px;
height: 128px;
}
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">GALLERY</h3>
</div>
<div class="panel-body">
<div class="image-box">
<img src="http://placehold.it/300x300">
<P class="caption">Image Description</P>
</div>
<div class="image-box">
<img src="http://placehold.it/300x300">
<P class="caption">Image Description</P>
</div>
<div class="image-box">
<img src="http://placehold.it/300x300">
<P class="caption">Image Description</P>
</div>
</div>
</div>
Here is a live demo
HTML file:
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">GALLERY</h3>
</div>
<div class="panel-body">
<div class="col-md-offset-4 col-xs-offset-3">
<div class="image-box">
<img src="member-icon.png">
<p class="caption">Image Description</p>
</div>
<div class="image-box">
<img src="member-icon.png">
<p class="caption">Image Description</p>
</div>
<div class="image-box">
<img src="member-icon.png">
<p class="caption">Image Description</p>
</div>
</div>
</div>
</div>
CSS file:
.image-box {
float: left;
}
.image-box img {
width: 128px;
height: 128px;
padding:15px;
}
See Demo: Div content center in panel body