Hello and thanks in advance for the help. Here's a link to the site in question: caulfield.co/test/
I'm attempting to create a parallax footer reveal effect using Bootstrap 4. I cannot seem to edit the z-index of the fixed-bottom footerto hide it behind the body div so that it reveals only after scrolling to the bottom of the body whose margin-bottom is equal the height of the div. For some reason, when trying to edit the z-index, nothing happens. I assume this is something in the CSS of Bootstrap causing this, but don't know where to start to look for it. Can anyone help?
CSS:
.body-temp{
height:1000px;
margin-bottom:300px;
background-color:black;
z-index:5000;
}
/* Footer
-------------------------------------------------- */
footer{
height:300px;
background-color:#232323;
margin: 0 auto;
text-align:center;
font-weight:300;
font-size:.8rem;
color:#666666;
z-index: -1000;
}
HTML:
<div class="container body-temp">
</div>
<!-- Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<footer class="container-fluid fixed-bottom">
<a class="" href="#">
<img class="grow" id="footer-logo" src="images/mb-white.svg" alt="Margaret Biggs Fine Art">
</a>
<p>© 2018 Margaret Biggs</p>
<div>
<a class="footer-icons" href="#">
<i class="fab fa-linkedin-in"></i>
</a>
<a class="footer-icons" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</div>
</footer>
Yes this is bootstrap overriding you css via the css specificity.
You added the BS clss fixed-bottom that has a z-index of 1030.
the selector footer wil not overide it.
Use footer.fixed-bottom to overide BS via specificity.
On the case of body-temp. It has a position: static. This wont work with z-index. To solve this add position: relative on your body-temp styles.
MDN DOCS for z-index
"For a positioned box (that is, one with any position other than static), the z-index property specifies: ..."
Hope this helps :)
The quickest and easiest solution is to simply set the position of the .body-temp div like below:
.body-temp {
position: relative;
}
That being said, what I would do is wrap your entire .body-temp div in a wrapper, and specify the background color of said wrapper div:
HTML
<div class="body-wrapper">
<div class="container body-temp"></div>
</div>
<footer class="container-fluid fixed-bottom">
<a class="" href="#">
<img class="grow" id="footer-logo" src="images/mb-white.svg" alt="Margaret Biggs Fine Art">
</a>
<p>© 2018 Margaret Biggs</p>
<div>
<a class="footer-icons" href="#">
<i class="fab fa-linkedin-in"></i>
</a>
<a class="footer-icons" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</div>
</footer>
CSS
.body-wrapper {
position: relative;
z-index: 5000;
background-color: #fff;
}
Related
I'm making a navbar in bootstrap 3 and I found something weird.
<nav className="navbar navbar-inverse">
<div className="container-fluid">
<div className="container">
<div className="row">
<div className="col-sm-3">
<a href="#">
Home
</a>
</div>
<div className="col-sm-3">
<a href="#">
About us
</a>
</div>
<div className="col-sm-3">
<a href="#">
Surveys
</a>
</div>
<div className="col-sm-3">
<a href="#">
Statistics
</a>
</div>
</div>
</div>
</div>
This is structure of this component and here is CSS, where I try to make <a> attribute larger on :hover
a:hover {
text-decoration: none;
color: inherit;
transform: scale(1.1);
}
And I can't help wondering why despite others attributes working, transform shows no effect. Not sure if it changes anything, but maybe I'll add that I use React for this application.
Only elements positioned by the box model can be transformed. As a rule of thumb, an element is positioned by the box model if it has display: block. Source
You can also use display: inline-block;.
Used this code around every image
<div class="side-by-side"> <a href="http://example.com ....> (include ALL the code for the image here) </div>
This is the CSS snippet
.side-by-side { float: left; margin-right: 5px }
It works... I mean images are on one line
But unfortunately the images align left, and I want them centered, all together.
Wrap your images in a div and set the text-align:center; then you dont need the extra div to wrap your a tags in you can just style the a tag itself. Like so:
<div class="centered-content">
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
<a href="#" class="side-by-side">
<img src="http://placehold.it/100x100"/>
</a>
</div>
And Css:
.centered-content{
text-align:center;
}
.side-by-side{
margin-right:5px;
display:inline-block;
}
I would use Flexbox to do it. Wrap your div in a container
<div class="container">
<div class="side-by-side">
</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
I am currently using the "hera" design featured here however the original code uses presumably Font Awesome, I'd like to replace these icons with my own text or possibly images. The code I'm working with is as follows:
<div class="grid">
<figure class="effect-hera">
<img src="img/17.jpg" alt="img17" />
<figcaption>
<h2>Tittle <span>Tittle two</span></h2>
<p>
<i class="fa fa-fw fa-file-image-o"></i>
<i class="fa fa-fw fa-file-image-o"></i>
<i class="fa fa-fw fa-file-archive-o"></i>
<i class="fa fa-fw fa-file-code-o"></i>
</p>
</figcaption>
</figure>
</div>
I added a <p> tag to replace the <i> tag however it didn't hide the span like in the demo; I presumed its due to my misunderstanding of the <figcaption> tag however after research I'm not sure. In even his CSS files I couldnt find the class linked to the middle <i> tags so Im stuck.
The <i>'s have opacity:0 until <figure class="effect-hera"> is hovered over, so if you want the same effect keep the <i>'s. If you want to stop Font Awesome, remove all the CSS classes in the <i>'s and use a different class for your own images/fonts. I made a jsFiddle of my working code, it is also below:
<div class="grid">
<figure class="effect-hera">
<img src="img/17.jpg" alt="img17" />
<figcaption>
<h2>Tittle <span>Tittle two</span></h2>
<p>
<i class="fa-fw"></i>
<i class="fa-fw"></i>
<i class="fa-fw"></i>
<i class="fa-fw"></i>
</p>
</figcaption>
</figure>
</div>
CSS:
.fa-fw {
background:url(http://maps.google.com/mapfiles/kml/pal3/icon55.png) no-repeat left top;
width:32px;
height:32px;
display:inline-block;
background-size:100%;
float:left;
}
.grid {
width:64px;
display:block;
}
HTML :
<a href="">
<img class="center" src="">
</a>
CSS :
.center { display: block; margin: 0 auto; }
That centers the image, but the problem is any extra white-space around the image is also clickable. Is there a way to fix that?
(Images vary in size)
You could just wrap a div around it and center the that div rather than the image itself.
<div class="center">
<a href="">
<img src="">
</a>
</div>
And then add a style definition for the div.
.center { margin: 0 auto; }
The only option I see would be putting the anchor in a div (non -clickable, with the size and style of your current anchor) and sizing the anchor based on the image:
HTML:
<div class="container">
<a href="" class="anchor">
<img src="http://placehold.it/350x150" />
</a>
</div>
CSS:
.container {
width: 100%;
text-align:center;
}
JSFIDDLE:
http://jsfiddle.net/Atumra/0jncgxkb/
How about doing this
<a href="" class="center">
<img src="">
</a>
Using the Bootstrap media feature, how can I place a badge in the lower right of the media block's image (so it's on top of the image)?
With such a markup :
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" />
<span class="badge badge-success pull-right">2</span>
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
My content
</div>
</div>
You have your badge at the bottom right of the image, but under. If you want it to be a bit over the image, add this css :
.media img+span.badge {
position: relative;
top: -8px;
left: 8px;
}
See this Fiddle : http://jsfiddle.net/d7kXX/
But obviously you can place it wherever you want. If you want it entierly over, try this :
http://jsfiddle.net/6cME7/
FYI, If you resize it breaks the badge size. I guess it gives a general idea but i think it is not fully functionnal.
Hard to tell what you want exactly without having seen your code, but I gave it a shot anyway:
HTML
<div class="media">
<a class="pull-left relative" href="#">
<img class="media-object" src="http://placekitten.com/200/150" />
<span class="label label-warning bottom-right">Cute kitten</span>
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet
</div>
</div>
CSS
.relative {
position: relative;
}
.label.bottom-right {
position: absolute;
right: 2px;
bottom: 2px;
}
I prefer using absolute positioning when thing have to be aligned relative to the bottom and/or right, as it is the easiest and most reliable method imo.
A demo: http://www.bootply.com/suRioyheqL