html - bootstrap caption in jumbotron -


is possible caption background image put in bootstrap jumbotron? caption slide bottom , semi-transparent. thing is, background image in css, 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 answers, related inline images. insight can give.

my_neck_hurts, have @ fiddle.

this code use css image jumbotron , has caption slides bottom.
added notes in css if want change things @ time.

normally set width via class in css using bootstrap here use col-lg-x etc control see in code.
way keeps responsive.

in css comments show adjust height how far want slider come up. if want slider cover full height there 2 places need change, both commented easy find.

hope 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: 0.6s ease;   opacity: 0.5; } .whatishere:hover:before {   opacity: 0; } /* 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 set 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: 300ms ease-out;     -moz-transition: 300ms ease-out;     -o-transition: 300ms ease-out;     -ms-transition: 300ms ease-out;      transition: 300ms ease-out;     left: 0; } /* slide caption style */  .slide-caption {     height: 150px;  /* set height of caption div */ /*  width: 300px; */ /* use col-lg-x set width */     display: block;     bottom: -150px; /* hide caption how tall */     line-height: 20px;     text-align: center; } /* 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; }

Comments

Post a Comment

Popular posts from this blog

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

i've website developed using phpfox v3.0.7 . now i'm trying implement 'sse(server sent events)' 1 of php files. reference i'm giving below necessary code part of file. file titled process.class.php , present @ location /var/www/module/notification/include/service/process.class.php present on server having ip http://34.124.40.142/ . <?php /** * [phpfox_header] */ header('content-type: text/event-stream'); header('cache-control: no-cache'); defined('phpfox') or exit('no dice!'); /** * * * @copyright [phpfox_copyright] * @author raymond benc * @package phpfox_service * @version $id: service.class.php 67 2009-01-20 11:32:45z raymond_benc $ */ class notification_service_process extends phpfox_service { /** * class constructor */ public function __construct() { $this->_stable = phpfox::gett('notification'); } public function add($...
Read more

java - Null response to php query in android, even though php works properly -

Image
table i'm trying retrieve above data using 2 php files below. want pass email parameter , return bets user = email. work fine when tested advanced rest client, problem not php. however, when try through android 2 java classes below, null pointer exception (logcat below) , json object returned null. i'm not sure error is, think i'm not passing parameter php , that's why it's producing null response. logcat 05-31 15:10:50.227 26074-26074/com.example.albert.betterapp e/androidruntime﹕ fatal exception: main process: com.example.albert.betterapp, pid: 26074 java.lang.runtimeexception: unable start activity componentinfo{com.example.albert.betterapp/com.example.albert.betterapp.displayallbets}: java.lang.nullpointerexception @ android.app.activitythread.performlaunchactivity(activitythread.java:2292) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2350) @ android.app.activitythread.acce...
Read more