I'm having two divs with the same height but different content. This content is dynamic made with a CMS. However I want to make the image and button to always be at the bottom of the div. How can I accomplish this? because I only get it to work if I use a fixed height, I never works with height: auto;
here is my HTML/CSS snippet
.box:nth-of-type(2n+1) {
margin-right: 10%;
}
.box {
width: 45%;
height: auto;
background-color: #ffffff;
box-shadow: 0 15px 14px -3px #d1daeb;
}
.box a {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: #602b96;
padding: 15px 50px;
text-decoration: none;
}
.box a:hover {
color: #ffffff;
}
.box div {
padding: 35px 40px 0px 40px;
}
.box img {
padding-top: 35px;
width: 100%;
}
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
This is how it looks now:
How sould i do this?
You can do this by flex. These are the styles that I added
body {
margin:0;
display: flex;
}
.box {
display: flex;
flex-direction: column;
}
.box img {
margin-top: auto;
padding-top: 35px;
width: 100%;
}
body {
margin:0;
display: flex;
}
.box:nth-of-type(2n+1) {
margin-right: 10%;
}
.box {
display: flex;
flex-direction: column;
width: 45%;
height: auto;
background-color: #ffffff;
box-shadow: 0 15px 14px -3px #d1daeb;
}
.box a {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: #602b96;
padding: 15px 50px;
text-decoration: none;
}
.box a:hover {
color: #ffffff;
}
.box div {
padding: 35px 40px 0px 40px;
}
.box img {
margin-top: auto;
padding-top: 35px;
width: 100%;
}
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
You can achieve this with flex and change some html
.box-wrapper {
display: flex;
align-items: stretch;
}
.box:nth-of-type(2n+1) {
margin-right: 10%;
}
.box {
width: 45%;
height: auto;
background-color: #ffffff;
box-shadow: 0 15px 14px -3px #d1daeb;
align-items: start;
display: flex;
flex-direction: column;
}
.box a {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: #602b96;
padding: 15px 50px;
text-decoration: none;
}
.box a:hover {
color: #ffffff;
}
.box div {
padding: 35px 40px 0px 40px;
}
.box img {
padding-top: 35px;
width: 100%;
}
.mt-auto {
margin-top: auto;
}
.p-0 {
padding: 0 !important;
}
<div class="box-wrapper">
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mt-auto p-0">
<a class="buttonArticle" href="#">VIEW</a>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
</div>
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mt-auto">
<a class="buttonArticle" href="#">VIEW</a>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
</div>
</div>
Related
I have got the floating image and its descriptions.
I want divs which contain descriptions to be positioned center vertically and flow around the image.
Here is my code.
.parent {
border: 1px red solid;
}
.parent:after, .parent:before {
content: "";
display: table;
clear: both;
}
.left-child {
width: 40vw;
height: 40vw;
border: 1px red solid;
float: left;
}
<div class="parent">
<div class="left-child"></div>
<div clss="right-child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div clss="right-child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div clss="right-child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
Anybody who can help me with solving this?
I recommend to you flex box.
A good link about that is here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
border: 1px red solid;
display: flex;
align-items: center;
}
.left-child {
width: 40vw;
height: 40vw;
border: 1px red solid;
}
<div class="parent">
<div class="left-child"></div>
<div class="right-child">
Insert your centered stuff here
</div>
</div>
Set the parent display property to table and the child to table-cell the you can use the vertical-align property to align you content vertically center on its parent:
.parent {
border: 1px red solid;
display: table;
overflow: hidden;
}
.parent:after, .parent:before {
content: "";
display: table;
clear: both;
}
.left-child {
width: 40vw;
height: 40vw;
border: 1px red solid;
float: left;
}
.right-child {
display: table-cell; vertical-align: middle;
}
<div class="parent">
<div class="left-child"></div>
<div class="right-child">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
I'm trying to create a simple design, image on top, text underneath. I'm using flexbox.
I want to keep the images the same ratio so I'm using the padding top aspect ratio hack to do so, that works well.
What I'm struggling with is getting the text box beneath the image to take up the rest of the remaining space in the container. I was hoping that flexbox would make this easy but I think using it in conjunction with the aspect ratio hack is causing issues.
Here's a fiddle of the basic layout https://codepen.io/anon/pen/NEqdyN. Can anyone help me make each of the red boxes expand to fill the remaining height? I also need to add a border radius the bottom of each corner so I can't use the overflow hidden method.
Thanks in advance!
Code below
<div class="container">
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
CSS
body {
margin: 0;
}
.container {
display: flex;
}
.card {
width: 30%;
margin: 0 1%
}
.image-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.text {
background: red;
padding: 20px
}
It should work by defining a flex container on each card and using flex: 1 0 auto on text blocks.
.card {
display: flex;
flex-direction: column;
}
.text {
flex: 1 0 auto;
}
Demo
body {
margin: 0;
}
.container {
display: flex;
}
.card {
display: flex;
flex-direction: column;
width: 30%;
margin: 0 1%;
}
.image-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.text {
background: red;
padding: 20px;
flex: 1 0 auto;
}
<div class="container">
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
My page has a fixed header, and there are content below. I have a div element, inside which I would like to relatively position another div. So I'm using the following structure:
Header: Fixed position
Container div: relative position
Div inside div: absolute position
This is all looking good, however in practice the relative and the absolute divs are displayed in front of the header, when scrolling.
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
I know about z-index, however before using another CSS element, I would like to know if it's possible to solve this problem without adding a new variable to the already existing code. Thank you in advance!
This will work for you:
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
z-index: 0;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2 {
position: fixed;
background-color: white;
z-index: 9;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
I have just added z-index: 0; to div.relative and z-index: 9; to h2[the z-index to the h2 can be changed as per your requirement, it works as layer format, so if you want your h2 to be top of all elements you can even go with z-index: 9999;, but all this depends upon the other elements in the page.].
I believe adding a simple z-index: 1 to the header is the way to go.
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: white;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Use z-index: 1; into your Fixed header will solved the problem.
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: yellow;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Use z-index
h2{
z-index:2;
}
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: white;
border-bottom:solid 1px #ccc;
top:0px;
z-index:2;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Adding a position to an element takes it out of the normal flow of the page. Which can cause them to overlap each other. The only way to make sure to the elements are displayed in the right order on the z-axis is with the z-index property in css.
h2{
position: fixed;
background-color: white;
z-index: 1;
}
Should be enough to fix your issues.
z-index is the most obvious and easiest way. Set the z-index to a high number like 9999 - z-index:9999. This will bring the header to the top most layer.
I've got a flex setup of list items to display information. I have a background image attached to these list items but I would like to create a zoom in effect when hovered or focused by a mouse. I think i'm partly on the way there, however my current setup makes it so that they are stretched out on mobile screens. I'm wondering if there's a way to achieve what i'm trying to do that is responsive.
I've searched for similar posts and I find that a lot of people use overflow: hidden; with a transform scale, I can't seem to get that to work with flex. Any help would be greatly appreciated!
body {
font-family: sans-serif;
}
h2 {
color: #3CAD5D;
padding-bottom: 0px;
margin-bottom: 0px;
}
ul {
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 1500px;
width: 100%;
}
li {
display: flex;
width: calc(33.333333% - 10px);
}
a {
flex-grow: 1;
box-sizing: border-box;
text-decoration: none;
color: #000;
box-shadow: 3px 3px 5px #888888;
padding: 20px;
}
a:hover {
color: #fff;
}
/*** MEDIA QUERIES ***/
#media screen and (max-width: 800px) {
ul {
flex-direction: column;
/* change direction of flex for mobile */
margin: 0 auto;
}
li {
width: 97%;
}
}
/*** BG WITH ZOOM ***/
.bg1 {
background: url('https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781');
margin: 5px;
}
.bg2 {
background: url('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg');
margin: 5px;
}
.bg3 {
background: url('https://ichef.bbci.co.uk/images/ic/560x315/p0517py6.jpg');
margin: 5px;
}
.bg1,
.bg2,
.bg3 {
background-size: 100% 100%;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.bg1:hover,
.bg2:hover,
.bg3:hover {
background-size: 130% 130%;
}
<ul>
<li class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
</ul>
Update
For the first 3 images:
Added a <div> to each <li> then removed .bg* .classes from the <li> and gave them to the new inner <div>. Then added overflow:hidden to <li>.
Added transform: scale(1.3) to the *:hover rulesets.
Changed background-size:100% 100% to background-size:cover
Demo
body {
font-family: sans-serif;
}
h2 {
color: #3CAD5D;
padding-bottom: 0px;
margin-bottom: 0px;
}
ul {
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 1500px;
width: 100%;
}
li {
display: flex;
width: calc(33.333333% - 10px);
overflow: hidden;
}
a {
flex-grow: 1;
box-sizing: border-box;
text-decoration: none;
color: #000;
box-shadow: 3px 3px 5px #888888;
padding: 20px;
}
a:hover {
color: #fff;
}
/*** MEDIA QUERIES ***/
#media screen and (max-width: 800px) {
ul {
flex-direction: column;
/* change direction of flex for mobile */
margin: 0 auto;
}
li {
width: 97%;
}
}
/*** BG WITH ZOOM ***/
.bg1 {
background: url('https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781');
margin: 5px;
}
.bg2 {
background: url('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg');
margin: 5px;
}
.bg3 {
background: url('https://ichef.bbci.co.uk/images/ic/560x315/p0517py6.jpg');
margin: 5px;
}
.bg1,
.bg2,
.bg3 {
background-size: cover;
/* Changed to cover */
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.bg1:hover,
.bg2:hover,
.bg3:hover {
transform: scale(1.3);
/* Changed to transform:scale() */
}
<ul>
<li>
<div class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</li>
<li>
<div class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</li>
<li>
<div class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</li>
<li class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
</ul>
Can I do all the blocks of the same height without JS and min-height (as a special case)? Blocks can be placed on multiple lines.
Example jsfiddle
ul {
font-size: 0;
max-width: 300px;
text-align: center;
}
li {
vertical-align: top;
display: inline-block;
width: 30%;
margin: 1%;
background: grey;
font-size: 12px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
If flexbox is an option, then you can make ul a wrapping flexbox.
How this works?
display: flex creates a flexbox which has the property to distribute whitespace between its children in various ways.
flex-wrap: wrap allows the lis to go to the next line depending on the content
justify-content: center does horizontal centering.
Vertically the lis have a property called align-items: stretch, which is the default - this allows the heights of the lis to be equal in a line.
See demo below:
ul {
font-size: 0;
max-width: 300px;
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
li {
vertical-align: top;
display: inline-block;
width: 30%;
margin: 1%;
background: grey;
font-size: 12px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
Easily, using display: flex.
Specify the orientation + wrapping in flex-flow: row wrap; and the central alignment in justify-content: center;
Example:
ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
font-size: 0;
max-width: 300px;
text-align: center;
}
li {
vertical-align: top;
display: inline-block;
width: 30%;
margin: 1%;
background: grey;
font-size: 12px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>