I want to make simple photo gallery with 3 images in a row,
and when i add width: 33%; the width doesn't apply to layout class.
Can anyone suggest, how can i make it to display it correctly?
Example: https://jsfiddle.net/kani339/ed7g6hjp/
HTML:
<section>
<div class="photo-gallery">
<div class="layout">
<div class="img-block">
<img src="download.jpg" alt="">
</div>
</div>
</div>
</section>
CSS:
.layout {
background: red;
opacity: 1;
height: 250px;
width: 33%;
float: left;
}
.img-block img {
height: 250px;
width: 33%;
float: left;
}
.img-block img:hover{
opacity: 0.5;
cursor:pointer;
}
Your 33% impacts the image not the layout.
Something like this maybe?
.layout {
background: red;
opacity: 1;
height: 250px;
width: 100%;
/* width: 350px; */
float: left;
}
.img-block img {
height: 250px;
width: 33%;
float: left;
}
.img-block img:hover {
opacity: 0.5;
cursor: pointer;
}
<section>
<div class="photo-gallery">
<div class="layout">
<div class="img-block">
<img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
<img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
<img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
</div>
</div>
</div>
</section>
Related
I am trying to "move" an image inside a div which is adjusted with object-fit: cover; and object-position: center;.
My question is: Can I move the center-positioned image a few pixels to the right without to remove the object-* from my css?
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
}
.myDiv.before img {
width: 100%;
height: 100%;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.general {
display: flex;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>
I would like to NOT resize the image as in .after, but moving the image a few px right/left in the div. Is there a way to do it?
Yes, simply adjust the object-position value. The property works the same way as background-position
The object-position property determines the alignment of the replaced element inside its box. The <position> value type (which is also used for background-position) is defined in [CSS-VALUES-3], and is resolved using the concrete object size as the object area and the content box as the positioning area. ref
Related question: Using percentage values with background-position on a linear-gradient
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
}
.myDiv.before img {
width: 100%;
height: 100%;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.myDiv.after.moved img {
object-position:calc(50% + 10px) 50%; /* the fix is here ! */
}
.general {
display: flex;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after moved">
<img src="https://via.placeholder.com/400x250">
</div>
</div>
You can move the images by setting left or right css attribute on the relative position as follows on <img> tag.
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
}
.myDiv.before img {
width: 100%;
height: 100%;
position: relative;
left: 10px;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: relative;
right: 10px;
}
.general {
display: flex;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>
Do it with padding.
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
/* Move the image left or right */
padding-left: 10px;
/* padding-right: 10px */
box-sizing: border-box;
background: blue;
}
.myDiv.before img {
width: 100%;
height: 100%;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.general {
display: flex;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>
Right now your image dimension is not changing... Please have a look.
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
}
.myDiv.before {
position: relative;
left: 20px;
}
.myDiv.before img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.general {
display: flex;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>
Please have a look...do you need like that way?
You could just move the img inside your div like this:
.myDiv img { position: relative; left: 10px; //or top, bottom, right }
.myDiv {
width: 150px;
height: 150px;
margin: 0 15px;
/* just for demo purpose */
background-color: green;
}
.myDiv.before img {
width: 100%;
height: 100%;
}
.myDiv.after img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.general {
display: flex;
}
.myDiv img {
position: relative;
left: 10px;
}
<div class="general">
<div class="myDiv before">
<img src="https://via.placeholder.com/400x250">
</div>
<div class="myDiv after">
<img src="https://via.placeholder.com/400x250">
</div>
</div>
So I am trying to make a loop of images that has description overlaying each of it. The overlay would be visible when the picture is hovered. Here is an example of the code.
.container {
height: 100px;
width:100px;
display: inline-block;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:flex;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>
In this case, the description box goes downwards since I wasnt using position: absolute;. However if I do so, the box wont inherit the pictures size and takes the size of the page. How do I solve this?
FIDDLE
Set the position of container to relative so the description would be absolute in relation to it:
.container {
height: 100px;
width:100px;
display: inline-block;
position:relative;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:absolute;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>
I hope this helps you out. once you make an element absolute, just make sure to make its parent relative. so that it doesn't float anywhere. Now you can set positions accordingly where you want to make it appear on hover.
.container {
height: 100px;
width:100px;
display: inline-block;
position: relative;
}
.picture {
height: 100%;
width:100%
}
.contAlign {
text-align: center;
}
.desc {
position:absolute;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 100%;
height: 0%;
opacity: 0.5;
transition: .5s ease;
}
.container:hover .desc {
height: 40%;
}
<div class="contAlign">
<div class="container">
<img class="picture" src="https://kbob.github.io/images/sample-3.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://imagej.nih.gov/ij/images/baboon.jpg">
<div class="desc"></div>
</div>
<div class="container">
<img class="picture" src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png">
<div class="desc"></div>
</div>
</div>
I'm trying to build a simple teaser grid for featured posts on a website using flexbox. It should look like this:
And in FF and Chrome it's all good. If i change the resolution of one image, all the others follow and update their size. But not in Safari. Whatever i do, it never fits to an equal height:
I really don't get the point why this is happening. Each image container on the right has exactly 50% of the height calculated by flexbox. And each image should be stretched to that height.
I could probably achieve this with background-size:cover but i would love to find a solution to use img tags instead.
Here's a demo: https://jsfiddle.net/7tjw8j83/1/
.featured-grid{
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
img{
width: 100%;
height: 100%;
display: block;
object-fit:cover;
}
.left{
width: 66.6666%;
}
.right{
width: 33.3333%;
display: flex;
flex-direction: column;
}
.right-top{
background: green;
flex: 1;
}
.right-bottom{
background: red;
flex: 1;
}
<div class="featured-grid">
<div class="left">
<img src="https://unsplash.it/600/450?image=1055">
</div>
<div class="right">
<div class="right-top">
<img src="https://unsplash.it/600/400?image=1051">
</div>
<div class="right-bottom">
<img src="https://unsplash.it/600/400?image=1057">
</div>
</div>
</div>
In addition to Michaels suggestion, you could do like this, where I used background-image instead of img (since you use a given height anyway), and how to add text at an absolute position
html, body {
margin: 0;
}
.featured-grid{
display: flex;
height: 100vh;
}
div {
position: relative;
background-position: center;
background-repeat: no-reapat;
background-size: cover;
overflow: hidden;
}
.left {
width: 66.666%;
}
.right{
width: 33.333%;
display: flex;
flex-direction: column;
}
.right-top{
flex: 1;
}
.right-bottom{
flex: 1;
}
.text {
position: absolute;
left: 10px;
bottom: 10px;
color: white;
}
.text > * {
margin: 5px;
}
<div class="featured-grid">
<div class="left" style="background-image: url(https://unsplash.it/600/450?image=1055)">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right">
<div class="right-top" style="background-image: url(https://unsplash.it/600/400?image=1051)">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right-bottom" style="background-image: url(https://unsplash.it/600/400?image=1057)">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
</div>
</div>
Updated based on a comment
html, body {
margin: 0;
}
.featured-grid{
display: flex;
height: 100vh;
}
div {
position: relative;
overflow: hidden;
}
img{
width: 100%;
height: 100%;
display: block;
object-fit:cover;
}
.left {
width: 66.666%;
}
.right{
width: 33.333%;
display: flex;
flex-direction: column;
}
.right-top{
flex: 1;
}
.right-bottom{
flex: 1;
}
.text {
position: absolute;
left: 10px;
bottom: 10px;
color: white;
}
.text > * {
margin: 5px;
}
<div class="featured-grid">
<div class="left">
<img src="https://unsplash.it/600/450?image=1055">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right">
<div class="right-top">
<img src="https://unsplash.it/600/400?image=1051">
<div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
<div class="right-bottom">
<img src="https://unsplash.it/600/400?image=1057"> <div class="text">
<h2>Title</h2>
<h3>Text</h3>
</div>
</div>
</div>
</div>
Updated (2:nd) based on a comment
html,
body {
margin: 0;
}
.featured-grid {
display: flex;
}
div {
position: relative;
overflow: hidden;
}
img {
visibility: hidden;
display: block;
}
img.show {
position: absolute;
visibility: visible;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.left img {
max-height: 100vh;
}
.right img {
max-height: 50vh;
}
.left {
width: 66.666%;
}
.right {
width: 33.333%;
display: flex;
flex-direction: column;
}
.right-top {
flex: 1;
}
.right-bottom {
flex: 1;
}
.text {
position: absolute;
left: 10px;
bottom: 10px;
color: white;
}
.text > * {
margin: 5px;
}
<div class="featured-grid">
<div class="left">
<img src="https://unsplash.it/300/250?image=1055">
<img class="show" src="https://unsplash.it/300/250?image=1055">
<div class="text">
<h2>Title 1</h2>
<h3>Text 1</h3>
</div>
</div>
<div class="right">
<div class="right-top">
<img src="https://unsplash.it/300/200?image=1057">
<img class="show" src="https://unsplash.it/300/200?image=1057">
<div class="text">
<h2>Title 2</h2>
<h3>Text 2</h3>
</div>
</div>
<div class="right-bottom">
<img src="https://unsplash.it/300/200?image=1057">
<img class="show" src="https://unsplash.it/300/200?image=1057">
<div class="text">
<h2>Title 3</h2>
<h3>Text 3</h3>
</div>
</div>
</div>
</div>
I have a problem, i want to set 3 floated divs and on the bottom I would like to have a footer. So I got these two solutions, but it does not work. Please check out the image:
Here the problem is that the content is not not cleared, so the footer does not change position:
<div class="container">
<div class="left"><div class="content"><div class="right">
<div style="clear:left;"></div>
</div>
<div class="footer"></div>
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
}
.center {
float: left;
width: 80%;
max-width: 500px;
}
.right {
width: auto;
}
.content {
height: auto !important;
height: 100%;
min-height: 100%;
}
.footer {
height: 202px;
margin: -202px auto 0;
position: relative;
}
If i clear the content, I get the result that the right div goes to the next line:
thanks!
I played around a little bit. I think your html structure wasn't right for the effect you were trying to create.
Here is a new example:
HTML
<div class="container">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
<div style="clear">
<div class="content">
</div>
<div class="footer">
</div>
</div>
CSS
.container {
height: auto !important;
min-height: 100%;
}
.left {
float: left;
width: 20%;
max-width: 200px;
min-height: 100px;
background: red;
}
.center {
float: left;
width: 80%;
max-width: 500px;
min-height: 100px;
background: blue;
}
.right {
width: auto;
min-height: 100px;
background: green;
}
.content {
height: auto !important;
height: 100%;
min-height: 100px;
width: 80%;
max-width: 500px;
margin: 0 auto;
background: yellow;
}
.footer {
height: 202px;
margin: 0 auto;
position: relative;
background: purple;
}
I rearanged everything in this fiddle:
http://jsfiddle.net/LJQCx/2/
I hope this is what you trying to achiev.
Here is the code hope it will help check the fiddle
<div class="page-wrap">
<div class="container">
<div class="left">
<p>I am Left</p>
</div>
<div class="center">
<p>I am Center</p>
</div>
<div class="right">
<p>I am Right</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footer">
<p>I am Footer</p>
</div>
* { margin: 0;}
html, body { height: 100%;}
.page-wrap {min-height: 100%;/* equal to footer height */margin-bottom: -142px; }
.page-wrap:after { content: ""; display: block;}
.footer, .page-wrap:after { /* .push must be the same height as footer */ height: 142px;}
.site-footer {}
.container{ width:100%;}
.left{ float:left; width:25%;}
.center{float:left; width:50%;}
.right{float:left; width:25%;}
I need some advice on this issue i'm having. In the jsfiddle below, I'm trying to create a responsive grid layout. The issue with what i have is, i would like the text to be in the middle of each individual grid. I've tried bumping it using margin-top but instead of the images stacking onto each other while resizing, the images are overlapping each other. The end result desired will be to have the text aligned center onto the image and have no gaps on all sides of the grid when resizing according to various screen resolution.
Link: http://jsfiddle.net/kelvinchow/VaDS9/
<style type="text/css">
#wrapper {
display: block;
width: 100%;
height: auto;
background: green;
}
.box {
display: inline-block;
float: left;
width: 50%;
height: auto;
vertical-align: baseline;
background: red;
}
.box-img img {
width: 100% !important;
height: auto;
}
.box-title {
display: block;
background: grey;
height: 25px;
font-size: 20px;
font-family: helvetica, san serif;
color: blue;
text-align: center;
margin-top: -100px;
}
</style>
<div id="wrapper">
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
<div class="box">
<div class="box-img">
<img src="http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png">
</div>
<p class="box-title">howdy</p>
</div>
</div>
You'll get this:
Fiddle here: http://jsbin.com/osazav/1.
With this markup:
<body>
<div id="tl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="tr" class="box">
<p class="box-title">howdy</p>
</div>
<div id="bl" class="box">
<p class="box-title">howdy</p>
</div>
<div id="br" class="box">
<p class="box-title">howdy</p>
</div>
</body>
And this css:
div.box {
background: url('http://airinlee.com/wp-content/uploads/2013/06/thumbnail6.png');
position: absolute;
height: 50%;
width: 50%;
background-size: cover;
background-position: center;
}
div.box p.box-title {
color: red;
background-color: black;
padding: 5px;
position: absolute;
margin: -10px -20px;
top: 50%;
left: 50%;
}
div.box#tl { top: 0%; left: 0%; }
div.box#tr { top: 0%; left: 50%; }
div.box#bl { top: 50%; left: 0%; }
div.box#br { top: 50%; left: 50%; }