Unable to figure this out. Which style is correct based on the css? Should each 'lorem' line up in it's own row as it is shown in firefox? or split like in chrome? How can I fix it so both browsers look the same?
Here is what I have currently
<body>
<header>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</header>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</section>
<article>article Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</article>
<aside>aside Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</aside>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</footer>
</body>
http://jsfiddle.net/nKHkg/
body {
width: 960px;
margin: 100px auto;
text-align: center;
}
header {
margin: 5px;
padding: 20px;
}
section {
margin: 5px;
padding: 100px;
}
article {
float: left;
margin: 5px;
padding: 20px;
}
aside {
float: right;
margin: 0 5px;
padding: 20px;
}
footer {
margin: 5px;
padding: 5px;
}
The above looks the same with Firefox
In Chrome, the article and aside is divided into two columns and looks uneven.
All you needed to do was apply good site architecture. When creating sections throughout the site you need to set your containers appropriately by using margin, float, display, and clear:both
See the difference now in your FIDDLE
Related
The title explains itself I belive. My CSS skill is not good enough to make it work, or predict everything.
I made an simple fiddle: https://jsfiddle.net/f6oe9umb/3/
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<div class="fakeparagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<div class="fakeparagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div class="fakeparagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<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 class="fakeparagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
<div class="fakeparagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
In this case simple margin-bottom should be good enough. But is it? And even if - how to find the correct value?
Check the default css for browsers here, and there it is:
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
so say you got a <div class="fake-p"/>, and the styling:
.fake-p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
But to be honest each browser has their default setting to html tags (different browser might have different styling but some are the same) and they can change it any time, so I suggest you to directly use a p tag if you want its behaviour.
I think that should make it look like a normal p:
<style type="text/css">
.fakeparagraph {
display: inline-block;
width: 100%;
}
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'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>
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>