bootstrap caption in jumbotron - html

Question

Is it possible to caption a background image that I put in a Bootstrap Jumbotron? I would like the caption to slide up from the bottom and be semi-transparent. The thing is, my background image is in the css, like this:
.jumbotron {
background-image: url('../img/honeycomb.jpg');
background-repeat: no-repeat;
background-position: 100%;
padding: 200px 0 140px 0;
margin-bottom: 70px;
text-align: center;
padding-bottom: 50px;
}
I have searched for answers, but all are related to inline images. Thanks for any insight you can give.

Answer 1

My_neck_hurts, have a look at this Fiddle.
This code will use css to get the image into the jumbotron and it also has a caption that slides up from the bottom.
I added some notes in the css to help if you want to change some things at any time.
Normally you would set the width via the class in the css but using bootstrap here we just use the col-lg-X etc to control this as you will see in the code.
This way it keeps it responsive.
In the css comments also show where to adjust the height for how far you want the slider to come up. If you want to slider to cover the full height then there is two places you need to change, both are commented so it is easy to find.
Hope it help to get you started.
body {
padding-top: 50px;
}
.block {
height: 600px;
padding-top:20px;
}
.whatishere:before {
content: "?";
position: absolute;
top:20%;
left:11%;
font-weight: 800;
background: black;
text-shadow: 0 0 5px white;
color: black;
width: 100px;
height: 100px;
-webkit-border-radius: 120px;
-moz-border-radius: 120px;
border-radius: 120px;
text-align: center;
font-size: 30px;
line-height: 100px;
-moz-transition: all 0.6s ease;
opacity: 0.5;
}
.whatishere:hover:before {
opacity: 0;
}
/* The Box Style */
.box {
border: 5px solid #fff;
cursor: pointer;
height: 300px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
/* width: 300px; */ /* use col-lg-X to set the width */
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
/* Caption Style */
.caption {
background-color: rgba(0,0,0,0.4);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/* The Slide Caption style */
.slide-caption {
height: 150px; /* set the height of the caption div */
/* width: 300px; */ /* use col-lg-X to set the width */
display: block;
bottom: -150px; /* hide the caption for how tall it is */
line-height: 20px;
text-align: center;
}
/* The Slide Caption :hover Behaviour */
.box:hover .slide-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}
.image {
background-image: url(http://img1.goodfon.su/original/1920x1080/b/b3/soty-pchela-med-fon-nasekomoe.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

Answer 2

I didn't really get what you wanted to do with that image. But if your issue is that you can't edit the HTML to insert an inline image you can still put your image in a :before or :after like this :
.jumbotron:after {
content: url('../img/honeycomb.jpg');
display: inline;
}
At that point, you can apply the solutions you read for inline images. You can also give it an absolute position, etc.
Look at this jsfiddle. Is this the kind of effect you want ? Or do you want it to be animated ?
https://jsfiddle.net/bdasilva/kmjuz212/1/
Hope it helped.

Answer 3

My_neck_hurts, Ok so you are almost there.
Just wanted the body to hold the image.
Here is the Fiddle with it doing that.
I've changed the background of the jumbotron to be transparent if that helps.
The image is a public image on the internet. It came up in a google search.
.bodyimage {
background-image: url(http://img1.goodfon.su/original/1920x1080/b/b3/soty-pchela-med-fon-nasekomoe.jpg);
background-position: center;
background-repeat: no-repeat;
height:100vh;
width:100%;
z-index: -100;
}
.bg-clear {
background-color: rgba(250,250,250, 0.3);
}