"guess box\"
Bootstrap 3.3.0 Snippet by adrnzhrf

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-md-3"> <div class="image guesscontainer"> <img src="http://dev.iknewit.co/images/guesses/guess_1.jpg"> <div class="answerOptions"> <h2>Will US attack Syria during 2015?</h2> <div class="answerOption " data-id="1441" id="answer_1441"> <a data-toggle="modal" data-target="#modalLogin" href="javascript:void(0);">Yes</a> </div> <div class="answerOption " data-id="1442" id="answer_1442"> <a data-toggle="modal" data-target="#modalLogin" href="javascript:void(0);">No</a> </div> </div> <!-- answerOptions --> </div> <!-- image --> </div>
.image.guesscontainer { width: 98%; } .image img { margin: auto; width: 100%; height: auto; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; /* -webkit-filter: blur(2px); */ -webkit-filter: brightness(60%); /* opacity: 0.6; */ background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); height:280px; } img { vertical-align: middle; } .image .answerOptions { width: 100%; text-align: center; position: absolute; top: 5%; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .image { margin: 30px auto; position: relative; width: 85%; } div { display: block; } .image .answerOptions .answerOption { margin-left: auto; margin-right: auto; margin-bottom: 10px; width: 80%; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.4); text-align: left; } .image .answerOptions .answerOption { position: relative; display: table; } .image .answerOptions .answerOption a { font-size: 14px; color: white; display: block; padding: 15px; } .image .answerOptions .answerOption a { font-size: 14px; color: white; display: block; padding: 15px; } .image .answerOptions h2 { width: 100%; text-align: center; color: white; font: bold 22px/45px Helvetica, Sans-Serif; font-weight: 300; letter-spacing: -1px; padding: 10px; margin-bottom: 20px; line-height: 1.5em; }

Related: See More


Questions / Comments: