I try to make a 3-column grid with images so that some text overlays these images. I found an example of the linear gradient for this purpose:
.card__content {
position: absolute;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}
So in HTML I have the next:
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="1.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="2.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="3.jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
</div>
</div>
</div>
</div>
</div>
But this gradient doesn't glue to the end of the image and climbs out to the right. And the thumbnail's border doesn't stretch for all length of the block, though without the gradient it did. Here is what it looks like now.
Image
Please help!
I have made a few changes:
.card__content {
position: absolute;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
height: 100%;
display: flex;
align-items: center;
padding: 10px;
color: #fff;
}
.thumbnail {
display: inline-block;
border: 0;
}
.thumbnail img {
width: 100%;
max-width: 100%
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Matricaria is a genus of flowering plants in the chamomile tribe within the sunflower family</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Gulls, or colloquially seagulls, are seabirds of the family Laridae in the suborder Lari</h3>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 thumb">
<div class="thumbnail" style="position:relative;">
<img src="https://images.pexels.com/photos/13639773/pexels-photo-13639773.jpeg?cs=srgb&dl=pexels-andrea-garibay-13639773.jpg&fm=jpg" align="left" class="img-rounded img-responsive">
<div class="card__content">
<h3>Cirsium arvense is a perennial species of flowering plant in the family Asteraceae</h3>
</div>
</div>
</div>
</div>
</div>
Related
I'm using a WordPress theme which is using bootstrap 3.4.1.
I have an issue with a grid, the fourth element is displayed in place of where the hypothetical 6th element should be.
Here's a snippet taken from my code, yet I couldn't make it appear like it is on my website. https://codepen.io/pierrick-pi-gallagher/pen/poWyvpY
Here you can see what I'm talking about.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="adforest_res">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="posts-masonry">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-806">
<div class="white category-grid-box-1">
<div class="image">
<div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
<div class="ribbon status_active" id="status-dyn-806">Actif</div>
<img src="https://www.hoppyconnect.com/wp-content/uploads/2021/12/logo-konrad-carre-80x80.png" alt="Blonde de soif – bec permanent – 6 mois" style="width: 40%;left: 30%;margin-top: 18% !important;margin-bottom: 17%;" class="img-responsive">
</div>
<a href="https://www.hoppyconnect.com/ad/blonde-de-soif-bec-permanent-6-mois/">
<div class="short-description-1 text-center">
<div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
<h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Blonde</h2>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
Non renseigné
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
6 mois min</div>
</div>
<span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">2,40 €/L HTDI</span>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-757">
<div class="white category-grid-box-1">
<div class="image">
<div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
<div class="ribbon status_active" id="status-dyn-757">Actif</div><img src="https://www.hoppyconnect.com/wp-content/uploads/2021/12/logo-konrad-carre-80x80.png" alt="D-CHECK – Offre > Contrat permanent > 1 bière" style="width: 40%;left: 30%;margin-top: 18% !important;margin-bottom: 17%;" class="img-responsive"></div>
<a href="https://www.hoppyconnect.com/ad/d-check-offre-contrat-permanent-1-biere/">
<div class="short-description-1 text-center">
<div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
<h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Double IPA</h2>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
Non renseigné
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
12 mois min</div>
</div>
<span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">2,30 €/L HTDI</span>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-710">
<div class="white category-grid-box-1">
<div class="image">
<div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
<div class="ribbon status_active" id="status-dyn-710">Actif</div>
<img src="https://www.hoppyconnect.com/wp-content/uploads/2021/11/shutterstock_402621667-1-2-313x234.jpg" alt="(Test) bec permanent 1 bière" class="img-responsive">
</div>
<a href="https://www.hoppyconnect.com/ad/test-bec-permanent-1-biere/">
<div class="short-description-1 text-center">
<div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
<h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Ambrée</h2>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
Non renseigné
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
12 mois min</div>
</div>
<span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">1,11 €/L HTDI</span>
</div>
</a>
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-707">
<div class="white category-grid-box-1">
<div class="image">
<div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
<div class="ribbon status_active" id="status-dyn-707">Actif</div>
<img src="https://www.hoppyconnect.com/wp-content/uploads/2021/11/shutterstock_402621667-1-1-313x234.jpg" alt="Bec blonde – 6 mois d’engagement mini" class="img-responsive">
</div>
<a href="https://www.hoppyconnect.com/ad/bec-blonde-6-mois-dengagement-mini/">
<div class="short-description-1 text-center">
<div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
<h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Barley wine</h2>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
Non renseigné
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
12 mois min</div>
</div>
<span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">12,00 €/L HTDI</span>
</div>
</a>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12 col-xs-12 col-sm-12"></div>
</div>
</div>
</div>
I don't understand since it's perfectly working on another page of my website with the same code.
I can't give link on my website since it is on coming soon mode.
Sorry to tell you what but the theme you're using is really badly written, there is more than 14k lines of CSS with multiple typos like on line 4970 position: realtive;.
There is no use of CSS grid but 192 uses of position: absolute; and 273 uses of !important.
In the HTML part there is class applied on div that aren't in the CSS like posts-masonry.
In every items on your "grid" there is this style directly applied on the HTML:
position: absolute;
left: Xpx;
top: Xpx;
it looks like these values have been applied by javascript.
To conclude, we won't be able to help fix this grid issue since the best way would be to re-write the grid system entirely.
I have a page with preview of images. All images are different size, but preview should be all square.
/* This is the CSS code which sets automatic height: */
.preview-img {
width: 100%;
height: auto;
object-fit: cover;
}
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image1">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/01-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image2">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/02-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#image3">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="text-white">Full size</p>
</div>
</div>
<img class="img-fluid preview-img" src="img/03-thumbnail.jpg" alt="">
</a>
<div class="portfolio-caption">
<h4>Image name</h4>
</div>
</div>
</div>
How can I set the height of an image according to it's width, without using pixels?
.preview-img {
width: 100%;
padding-bottom: 100%;
height: 0;
object-fit: cover;
}
This should work on all major browsers.
If you can use javascript,
window.addEventListener("resize", function(e) {
var element = document.getElementsByClassName("preview-img");
mapElement.style.height = mapElement.width;
});
I'm not very good in CSS, and so I don't know how to solve my problem. I've a grid images (you can see at https://i.imgur.com/88yDcbN.png). As you can see the first image (I selected) has useless white space below.
How can I move the image below so that there are 50px difference?
Actually I use these classes for my box:
col-sm-6 col-md-4
I'm using bootstrap as you can see.
The other divs inside the col-sm-6 col-md-4 have the right height.
Thank you for your help!
Example box:
<div class="_00d7">
<div class="row">
<div class="col-sm-6 col-md-4">
<div data-id="11" data-score="4380" class="_4180">
<a class="eac1">
<img src="images/E8wfc3V4Azc.jpg">
</a>
<div class="_96ae">
Punteggio immagine: <b>4380</b>.
</div>
</div>
</div>
</div>
</div>
CSS:
._00d7 ._4180 {
padding: 0;
margin-bottom: 30px;
background-color: #fff;
border-radius: 4px;
border: none;
transition: 0.15s ease-in-out;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.0975);
}
._00d7 .eac1 img {
border-radius: 4px 4px 0 0;
vertical-align: middle;
border-style: none;
margin-right: auto;
margin-left: auto;
display: block;
max-width: 100%;
height: auto;
}
(sorry for classes names, I'm using react)
For that particular layout (a Mansonry-like layout) Bootstrap4 give you a solution: use Card columns: https://getbootstrap.com/docs/4.0/components/card/#card-columns.
I give you an example. This is only a start point, you can customize as you want.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="_00d7">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card-columns">
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/500">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/250">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text">Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/100">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
<div data-id="11" data-score="4380" class="_4180 card">
<a class="eac1">
<img class="card-img-top" src="https://picsum.photos/200/300">
</a>
<div class="_96ae card-body">
<p class="card-text"> Punteggio immagine: <b>4380</b>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Be careful: the images order is vertical:
1 4 7
2 5 8
3 6 9
I'm having trouble figuring out how to center an image vertically and horizontally. Essentially I have two rows of images, all have a width of 150 but heights vary.
CSS
.image-center {
display: inline-block;
vertical-align: middle;
position: relative;
}
HTML
<div class="row">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
If you're using Bootstrap 4 (it seems you are), you may use flex alignment classes like align-items-center justify-content-center
<div class="col d-flex align-items-center justify-content-center">
More info: https://getbootstrap.com/docs/4.1/layout/grid/#alignment
This CSS will be responsive for any devices. It will center horizontally and vertically.
.col {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div class="row imageCenterAlign topAlign">
<div class="col">
<img class="center-block image-center" width="150" src="imagery/1.png"/>
</div>
<div class="col">
<img class="center-block image-center" width="150" src="imagery/2.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/3.png"/>
</div> <div class="col">
<img class="center-block image-center" width="150" src="imagery/4.png"/>
</div>
</div>
<div class="row imageCenterAlign">
<div class="col">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/6.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
css:
.imageCenterAlign{
display: flex;
justify-content: center;
align-items: center;
}
.topAlign{
top:50%;
}
The best way to accomplish this would be to use flexbox imho.
HTML:
<div class="group">
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x110/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
<img src="https://fakeimg.pl/150x80/?text=Hello" />
<img src="https://fakeimg.pl/150x70/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x115/?text=Hello" />
<img src="https://fakeimg.pl/150x90/?text=Hello" />
<img src="https://fakeimg.pl/150x100/?text=Hello" />
<img src="https://fakeimg.pl/150x120/?text=Hello" />
</div>
CSS:
DIV.group {
display:flex;
flex-flow:row wrap;
justify-content:space-between;
align-items:center;
align-content:stretch;
}
I will recommend you to use the display:flex, you just need to create an horizontal class and a vertical class an assign it to the divs of the image depending of the orientation you want to give it.
It's easy and simple, I write you the snippet, you just need to change the margins, and I also changed the image.
div.horizontal {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
div.vertical {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 15px;
}
<div class="row horizontal">
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
<div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div> <div class="col vertical">
<img class="center-block image-center" width="150" src="https://www.alliedmetrics.com/images/black-viton-seals.png"/>
</div>
</div>
<div class="row horizontal">
<div class="col vertical">
<img class="center-block" width="150" src="imagery/5.png"/>
</div> <div class="col vertical">
<img class="center-block " width="150" src="imagery/6.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/7.png"/>
</div> <div class="col vertical">
<img class="center-block" width="150" src="imagery/8.png"/>
</div>
</div>
Hope it helps you.
don't know about bootstrap but if you use normal CSS
apply this class to the child container
position: absolute,
margin: auto,
top: 0,
right: 0,
bottom: 0,
left: 0,
My problem is that the heights of rows / columns does not fit. The first column has the class col-sm-8 and the second the class col-sm-4
The second class col-sm-4 has another two rows, each with col-sm-12 classes.
I have looked for some Masonry similar jQuery Plugins but I want to stay at CSS. How can I solve this heights and keep responsivity?
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="padding-bottom:30px;">
<div class="col-sm-8">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/inteledison.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600"/>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/inteledison.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600"/>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/bare.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/esp8622.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
<div class="col-sm-4">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/raspb2b.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
<div class="col-sm-4">
<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/beaglebone.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
</div>
</div>
</div>