<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 ---------->
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<div class="modal-content1">
<div class="modal-header1">
<i style="font-size:17px; color:white;" class="fa fa-clock-o fa-2"></i><a style="color:red; font-size:15px"> 13 Hrs 15 Mins 20 Secs</a> <a href=""><label for="share" class="label entypo-export"></label><i class="fa fa-share" style="float: right;"></i></a>
</div>
<div class="modal-body">
<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>
</div>
<div class="modal-footer1">
<div class="shared-with-members clearfix">
<div class="horizontal-avatar-list animation">
<div class="title-bubble-component south" title="Arthur Kirsz">
<div data-toggle="tooltip" data-html="true" data-placement="left" title="Hooray!</br>adsds" class="photo circle avatar-component" style="width:24px;height:24px;font-size:10px;font-weight:700;border-radius:50%;" data-reactid=".7"><img src="https://dl-web.dropbox.com/account_photo/get/dbid%3AAACSDCC6F6qmlXKmmUtr8sVVQemUqrvu0b0?vers=1399413543726&size=48x48" width="24" height="24" data-reactid=".7.0"></div>
</div>
<div class="title-bubble-component south" title="Anna est propriétaire">
<div class="initials circle avatar-component" style="width:24px;height:24px;font-size:10px;font-weight:700;border-radius:50%;line-height:20px;color:hsl(40, 60%, 53%);border-color:hsl(40, 60%, 53%);">FB</div>
</div>
<div class="title-bubble-component south" title="Sophie Bator peut modifier les fichiers">
<div class="initials circle avatar-component" style="width:24px;height:24px;font-size:10px;font-weight:700;border-radius:50%;line-height:20px;color:hsl(156, 60%, 53%);border-color:hsl(156, 60%, 53%);">TW</div>
</div>
<div class="title-bubble-component south" title="aubrythomas4@gmail.com n'a pas rejoint le dossier">
<div class="initials circle avatar-component" style="width:24px;height:24px;font-size:10px;font-weight:700;border-radius:50%;line-height:20px;color:#aaa;border-color:#aaa;">G+</div>
</div>
<div class="title-bubble-component south" title="aubrythomas4@gmail.com n'a pas rejoint le dossier">
<div class="initials circle avatar-component" style="width:24px;height:24px;font-size:10px;font-weight:700;border-radius:50%;line-height:20px;color:#aaa;border-color:#aaa;">CM</div>
</div>
<div class="overflow-pill avatar-component" data-toggle="tooltip" data-html="true" data-placement="right" title="Hooray!</br>adsds" style="height:24px;font-size:10px;font-weight:700;line-height:24px;min-width:24px;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;padding:0 4px;">+1</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
.modal-content1
{
width:300px;
}
.modal-body{
padding:0px;
height:300px;
}
.image.guesscontainer {
width: 100%;
}
.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:300px;
}
.image .answerOptions {
width: 100%;
text-align: center;
position: absolute;
top: 5%;
}
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;
}
* {
font-family: sans-serif;
}
.horizontal-avatar-list > * {
display: inline-block;
margin-right: 4px;
vertical-align: middle;
}
.horizontal-avatar-list > *:last-child {
margin-right: 0;
}
.horizontal-avatar-list .title-bubble-component .avatar-component--pointer {
cursor: pointer;
}
.horizontal-avatar-list .avatar-component.overflow-pill,
.horizontal-avatar-list .avatar-component.shared-link {
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
.horizontal-avatar-list .avatar-container {
display: inline-block;
}
.horizontal-avatar-list.animation > * {
-webkit-animation: avatarFadeIn 0.3s;
-moz-animation: avatarFadeIn 0.3s;
animation: avatarFadeIn 0.3s;
-webkit-animation-timing-function: cubic-bezier(0.57, 0.23, 0.39, 1.6);
-moz-animation-timing-function: cubic-bezier(0.57, 0.23, 0.39, 1.6);
animation-timing-function: cubic-bezier(0.57, 0.23, 0.39, 1.6);
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
.horizontal-avatar-list.animation > :nth-child(1) {
-webkit-animation-delay: 25ms;
-moz-animation-delay: 25ms;
animation-delay: 25ms;
}
.horizontal-avatar-list.animation > :nth-child(2) {
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
animation-delay: 50ms;
}
.horizontal-avatar-list.animation > :nth-child(3) {
-webkit-animation-delay: 75ms;
-moz-animation-delay: 75ms;
animation-delay: 75ms;
}
.horizontal-avatar-list.animation > :nth-child(4) {
-webkit-animation-delay: 100ms;
-moz-animation-delay: 100ms;
animation-delay: 100ms;
}
.horizontal-avatar-list.animation > :nth-child(5) {
-webkit-animation-delay: 125ms;
-moz-animation-delay: 125ms;
animation-delay: 125ms;
}
.horizontal-avatar-list.animation > :nth-child(6) {
-webkit-animation-delay: 150ms;
-moz-animation-delay: 150ms;
animation-delay: 150ms;
}
.horizontal-avatar-list.animation > :nth-child(7) {
-webkit-animation-delay: 175ms;
-moz-animation-delay: 175ms;
animation-delay: 175ms;
}
.horizontal-avatar-list.animation > :nth-child(8) {
-webkit-animation-delay: 200ms;
-moz-animation-delay: 200ms;
animation-delay: 200ms;
}
.horizontal-avatar-list.animation > :nth-child(9) {
-webkit-animation-delay: 225ms;
-moz-animation-delay: 225ms;
animation-delay: 225ms;
}
.horizontal-avatar-list.animation > :nth-child(10) {
-webkit-animation-delay: 250ms;
-moz-animation-delay: 250ms;
animation-delay: 250ms;
}
.horizontal-avatar-list.animation > :nth-child(11) {
-webkit-animation-delay: 275ms;
-moz-animation-delay: 275ms;
animation-delay: 275ms;
}
.horizontal-avatar-list.animation > :nth-child(12) {
-webkit-animation-delay: 300ms;
-moz-animation-delay: 300ms;
animation-delay: 300ms;
}
.horizontal-avatar-list.animation > :nth-child(13) {
-webkit-animation-delay: 325ms;
-moz-animation-delay: 325ms;
animation-delay: 325ms;
}
.horizontal-avatar-list.animation > :nth-child(14) {
-webkit-animation-delay: 350ms;
-moz-animation-delay: 350ms;
animation-delay: 350ms;
}
.horizontal-avatar-list.animation > :nth-child(15) {
-webkit-animation-delay: 375ms;
-moz-animation-delay: 375ms;
animation-delay: 375ms;
}
.horizontal-avatar-list.animation > :nth-child(16) {
-webkit-animation-delay: 400ms;
-moz-animation-delay: 400ms;
animation-delay: 400ms;
}
@-webkit-keyframes avatarFadeIn {
from {
opacity: 0;
-webkit-transform: translate(10px, 0);
}
to {
opacity: 1;
-webkit-transform: translate(0px, 0);
}
}
@-moz-keyframes avatarFadeIn {
from {
opacity: 0;
-moz-transform: translate(10px, 0);
}
to {
opacity: 1;
-moz-transform: translate(0px, 0);
}
}
@keyframes avatarFadeIn {
from {
opacity: 0;
-webkit-transform: translate(10px, 0);
-moz-transform: translate(10px, 0);
-ms-transform: translate(10px, 0);
-o-transform: translate(10px, 0);
transform: translate(10px, 0);
}
to {
opacity: 1;
-webkit-transform: translate(0px, 0);
-moz-transform: translate(0px, 0);
-ms-transform: translate(0px, 0);
-o-transform: translate(0px, 0);
transform: translate(0px, 0);
}
}
.avatar-component {
position: relative;
text-align: center;
}
.avatar-component.overflow-pill, .avatar-component.shared-link {
color: #7b8994;
display: inline-block;
background: #e1e1e1;
box-sizing: border-box;
overflow: hidden;
vertical-align: middle;
}
.avatar-component.shared-link {
background-image: url("/static/images/avatar/shared-link-icon.svg");
background-position: center;
background-size: 12px;
background-repeat: no-repeat;
}
.avatar-component.circle, .avatar-component.photo:after {
overflow: hidden;
border-radius: 50%;
}
.avatar-component.initials {
box-sizing: border-box;
color: #0bacff;
border: 2px solid #0bacff;
}
.avatar-component.initials, .avatar-component.overflow-pill {
cursor: default;
}
a .avatar-component.initials, a .avatar-component.overflow-pill {
cursor: pointer;
}
.avatar-component.photo:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
pointer-events: none;
}
.modal-header1 {
min-height: 16.43px;
padding: 8px;
background-color:#00486c;
border-bottom: 0px solid rgb(229, 229, 229);
}
.modal-footer1 {
padding: 15px;
text-align: right;
border-top: 0px solid rgb(229, 229, 229);
background-color:#00486c;
}
// tooltip demo
$('a').tooltip();
