I am creating columns inside a row using Foundation CSS front-end framework.
<div class="row small-up-2 large-up-3 food-container">
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
</div>
This is my CSS:
.column, .columns {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.food-wrap { position: relative; }
.food-wrap > .panel {
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.food-panel-top { top: 0; }
.food-panel-bottom { bottom: 0; }
.food-wrap .thumbnail {
border: medium none;
box-shadow: none;
}
Problem: Each class .foodwrap has a padding to the left and right. I want the class .food-panel-top to be wrapped inside the paddings of .foodwrap. What happens when I give .food-panel-top a width of 100% is that it is going outside the limits. I want the .food-panel-top to have the same width with class="thumbnail"
Any help is appreciated.
I know the answer to this post now. I still to post the answer so it can help out other developers out there.
The key in solving this question is to remove the left and right padding of class="column". After removing the left and right paddings, we can now maximing the width of food panel classes to 100%.
Related
I created 2 buttons that scroll the DIV left and right. However, it scrolls a fixed width. I want it to scroll each column of Bootstrap 5 on clicking Prev/Next.
or in simpler terms, I want it to scroll one column each to the left or right as per the click and not 100px each as it currently does. Please help.
DEMO JSFiddle: https://jsfiddle.net/hsmx2f5z/
HTML
<div class="nav-scroller">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row nav" id="boxSlider">
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 1</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 2</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 3</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 4</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 5</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
<div class="col-md-3 nav-scroller__eighty">
<div class="card">
<div class="card-body">
<h5>Title 6</h5>
<p>Some information about the slider. Some information about the slider. Some information about the slider. Some information about the slider.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<input id="btnLeft" type="Button" value="Prev"/>
<input id="btnRight" type="Button" value="Next" />
CSS:
.nav-scroller {
position: relative;
z-index: 2;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
margin-top: -1px;
overflow-x: auto;
color: rgba(255, 255, 255, .75);
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
padding-top: 50px;
padding-bottom: 50px;
font-size: 14px;
color: #6c757d;
min-width: 100px;
}
.nav-underline .nav-link:hover {
color: #007bff;
}
.card-body p {
color: #393939;
white-space: pre-wrap;
}
.nav-underline .active {
font-weight: 500;
color: #343a40;
}
.nav-scroller__eighty {
width: 80%;
max-width: 80%;
}
JS:
const boxSlider = document.getElementById('boxSlider');
document.getElementById("btnLeft").onclick = () => {
boxSlider.scroll({
left: boxSlider.scrollLeft + 200,
behavior: 'smooth'
});
}
document.getElementById("btnRight").onclick = () => {
boxSlider.scroll({
left: boxSlider.scrollLeft - 200,
behavior: 'smooth'
});
}
Your best bet is probably to scroll based on the width of the column elements, like this:
boxSlider.scroll({
left: boxSlider.scrollLeft + widthOfColumn,
behavior: 'smooth'
});
You can get the width of a column like this:
// Assuming all columns are the same width, get the width of the first column
boxSlider.querySelector(".nav-scroller__eighty").offsetWidth
Your code should look something like this
const boxSlider = document.getElementById('boxSlider');
document.getElementById("btnLeft").onclick = () => {
boxSlider.scroll({
left: boxSlider.scrollLeft + boxSlider.querySelector(".nav-scroller__eighty").offsetWidth,
behavior: 'smooth'
});
}
document.getElementById("btnRight").onclick = () => {
boxSlider.scroll({
left: boxSlider.scrollLeft - boxSlider.querySelector(".nav-scroller__eighty").offsetWidth,
behavior: 'smooth'
});
}
I'm using bootstrap v4.
I have an image, I want it stretched (keeping its aspect ratio) to the full width of the page, will means the image/image container's height can change.
I also want a div on the top and bottom of the image.
Bootstrap has row align-items-start and row align-items-end which I used to try to make my divs go where I want, but it didn't seem to work.
I'm not sure if it is possible to overlay elements like how I want, due to the image/container div resizes. Possibly I need to use javascript for this.
HTML
<div class="outer container-fluid">
<img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100">
<div class="myboxes container-fluid">
<div class="row align-items-start">
<div class="col-1 redbox">Top</div>
</div>
<div class="row align-items-end">
<div class="col-1 bluebox">Bottom</div>
</div>
</div>
</div>
CSS
.outer {
position: relative;
}
.redbox {
background: rgba(255, 0, 0, 1);
height: 20px;
}
.bluebox {
background: rgba(0, 0, 255, 1);
height: 20px;
}
.myboxes {
position: absolute;
z-index: 2;
}
#cats {
position: absolute;
z-index:1;
}
Not working fiddle
Image of what I want
.outer {
position: relative;
}
.redbox {
background: rgba(255, 0, 0, 1);
height: 20px;
}
.bluebox {
background: rgba(0, 0, 255, 1);
height: 20px;
}
#topBox, #bottomBox {
position:absolute;
left:0
}
.img-fluid {
width:100%;
display: block;
}
#topBox {
top:0
}
#bottomBox {
bottom:0
}
<div class="outer container-fluid">
<img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100" />
<div id="topBox" class="row align-items-start">
<div class="col-1 redbox">Top</div>
</div>
<div id="bottomBox" class="row align-items-end">
<div class="col-1 bluebox">Bottom</div>
</div>
</div>
.container {
width:100%;
position:relative;
padding:0px;
}
.img-fluid {
width:100%;
}
.box {
position:absolute;
left:0px;
height: 20px;
}
.top {
top:0px;
background: red;
}
.bottom {
bottom:5px;
background: blue;
}
<div class="container">
<div class="box top">TOP</div>
<div class="box bottom">BOTTOM</div>
<img id="cats" class="img-fluid" src="http://placekitten.com/g/800/100"/>
</div>
It's very much possible to overlay element like you want to and fairly easy too. You don't even need so many classes and div's for doing so.
I'm trying to create a grid of photos where you can hover over them and they will change into other images. I've tried placing the image on CSS as background image but when you hover, the other picture doesn't seem to be exactly the same size (when it actually is).
I also tried using two images method (one on top of the other) and it works well with only one image on the page but with a grid of images, it doesn't work because of the position: absolute.
The only way that I found that "sort of" works is by replacing one image for the other but then you don't have a smooth transition (fade into another image).
Here is the access to code pen (seems to work better):
Code:
css:
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/>
<!-- trying to use hover to change images
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> -->
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 right">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</section>
</body>
I am not sure if this is what you were looking for.
.row {
display: flex;
flex-direction: row;
}
.flex-item {
min-width: 200px;
min-height: 200px;
}
.hover-img {
transition: background-image 1s ease-in-out;
background-size: cover;
}
.img-1 {
background-image: url(https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg);
width: 400px;
/*
height: 200px;*/
flex-grow: 2;
}
.img-1:hover {
background-image: url(http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg);
}
.img-2 {
background-image: url(http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg);
/* width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-2:hover {
background-image: url(http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif);
}
.img-3 {
background-image: url(http://donsmaps.com/clickphotos/dolnivi200x100.jpg);
/*width: 200px;
height: 200px;*/
flex-grow: 1;
}
.img-3:hover {
background-image: url(http://markcarson.com/images/SunBird-7-200x200.png);
}
.img-4 {
/*max-width:400px;*/
flex-grow: 2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<section class="container pages-content">
<div class="row">
<div class="flex-item hover-img img-1"></div>
<div class="flex-item hover-img img-2"></div>
<div class="flex-item hover-img img-3"></div>
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" class="flex-item img-4" />
</div>
</section>
</body>
Ok so I have been playing around with your problem for a bit. I came up with this solution: http://codepen.io/anon/pen/Rpwewg. It appears to be working the way you want it. I ran into two issues figuring it out.
The first one was that you are using the position: absolute on the images. it will place the image relative to the closest parent that is relatively positioned. Since in your example the parent div was a bootstrap class I decided to create a new div with position: relative assigned to it and gave it a class of images-wrapper.
Now I just needed to overlap the images over each other, just as you did in the example. But...If I make both images position: absolute the browser won't have an height assigned to the images-wrapper class. Therefore I decided to give one of the images a relative position and the other one absolute so it would overlap.
hope it helps :).
html
<body>
<section class="container pages-content">
<div class="row">
<div class="col-md-12 bottom">
<!--img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/-->
<!-- trying to use hover to change images-->
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> <!---->
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="images-wrapper"><img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/>
</div>
</div>
<div class="col-md-6 col-sm-12 bottom left">
<img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
</div>
</div>
<!-- Second block -->
<div class="row">
<div class="col-md-6 col-sm-12 right ">
<div class="row">
<div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
</div>
<div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
</div>
<div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
</div>
</div>
</div><!--./col-md-6-->
<div class="col-md-6 bottom col-sm-12 left project-image">
<img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
</div>
</div><!--./block 2-->
</body>
css
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
position: absolute;
z-index: 10;
opacity: 1;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
z-index: 9;
opacity: 1;
position: relative;
}
.images-wrapper{
position: relative;
}
The best way to achieve this is to set the images as background and hover background, then set background-size:cover to keep the image display "uniform" in size. No need for Javascript code at all.
Here, I forked your Codepen for a demo. I only applied the hover effect to the first image for you to check out. Let me know if it helps.
For the "smooth transition", CSS also takes care of it for you. Feel free to change the div width (and height) to serve your needs better:
div.row div {
cursor: pointer;
transition: ease 0.5s all;
}
div.row .col-md-12:first-child {
background-image: url('https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg');
background-size: cover;
height: 200px;
margin-bottom: 10px;
}
div.row .col-md-12:first-child:hover {
background-image: url('http://donsmaps.com/clickphotos/dolnivi200x100.jpg');
}
Ok, I have this code I have done up here on how I need this solution to function:
Codepen: http://codepen.io/anon/pen/MaOrGr?editors=110
HTML:
<div class="container">
<div class="wrapper row">
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
</div>
</div>
SCSS / CSS:
.wrapper {
.box {
position: relative;
height: 340px;
overflow: hidden;
margin-top: 10px;
&:hover > .rollover-wrap {
bottom: 260px;
}
.cta-background {
background-image: url('http://ideas.homelife.com.au/media/images/8/2/8/9/0/828947-1_ll.jpg');
background-size: cover;
height: 260px;
}
.rollover-wrap {
position: relative;
bottom: 0;
transition: 0.3s;
z-index: 2;
}
.details {
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: gray;
height: 80px;
}
.summary {
height: 260px;
font-size: 15px;
padding: 15px;
background-color: #E29222;
z-index: 2;
}
}
}
This is working fine and is the effect I am wanting; however, I need to support the gray area being able to have multiple lines of text, and if one does, then the other adjacent gray sections should expand to the same height.
At the moment it uses fixed heights to assist with hiding and bringing in the transition on hover, but this hinders the ability for the gray area to expand. Even if it could expand, the other boxes need to match the height.
I have tried using flexbox and changing the html layout to no avail.
I don't mind if the image & summary sections have a fixed height, but the gray area needs to be able to expand to it's content.
Is there anyway to do what I want to do without JavaScript? If not, is there a clean way to do it with JavaScript/jQuery that doesn't have too much of a messy fallback?
I am using bootstrap grid to show a image gallery. Now I want to center the entire bootstrap .container within a div (.abc). Here is the link to the fiddle - http://jsfiddle.net/tn3j2kos/
Code below -
.abc {
margin: auto;
width: 96%;
background-color: #ffffcc;
}
.imgframe {
position: relative;
display: inline-block;
width: 120px;
height: 80px;
margin: 5px;
}
div img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: inline-block;
height: 100%;
max-height: 70px;
max-width: 110px;
margin: auto;
}
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="abc">
<div class="container">
<div class="row">
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://www.google.co.in/images/srpr/logo11w.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://mozorg.cdn.mozilla.net/media/img/styleguide/identity/firefox/usage-logo.png?2013-06" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://www.google.co.in/images/srpr/logo11w.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://g.twimg.com/About_logoUsage.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://g.twimg.com/About_logoUsage.png" />
</div>
</div>
</div>
</div>
</body>
More details - The sample in fiddle has five thumbnails. I want the thumbnails within the div .row to be left aligned. And the group of thumbnails (inside div .container) to be center aligned inside div .abc.
My several attempts have failed, and I posted the code for my last attempt.
EDIT - Don't bother running code snippet inside SO as it is rendering incorrectly. Use js fiddle I posted at top instead.
EDIT 2 - Perhaps I can explain what I want to achieve through this equation container_width = no_of_thumb*(thumb_width+margin*2).
EDIT 3 - How it appears-
How I want it to appear-
I think you are misunderstanding the workings of bootstrap a bit:
.container should be your outer most wrapper, or you could use .container-fluid in stead
.col- classes determine width and padding/margin of the block they are aplied to. Messing with these values will break the responsiveness. Use a wrapper inside those .col blocks in stead if you need to play with dimensions.
why are you positioning those images absolute? I don't see what you are trying to achieve...
I went ahead and cleaned up your fiddle a bit. I think this may be what you are after: http://jsfiddle.net/tn3j2kos/4/embedded/result/
HTML:
<div class="abc">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-6">
<img class='img-responsive' src=#" />
</div>
....
CSS:
.abc {
background-color: #ffffcc;
padding: 0 4%;
}
just set .container to display: inline-block and call text-align: center on .abc
FIDDLE