<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;
}
