Bootstrap Snippet box hover using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 id="box">
  
  <div id="overlay">
    <span id="plus">+</span>
  </div>
  
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body    {  background:#e7e7e7;}
#box    {  width:300px;
           height:200px;
           box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
          border-bottom:2px solid #fff;
          border-right:2px solid #fff;
          margin:5% auto 0 auto; 
          background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
  background-size:cover;
border-radius:5px;
overflow:hidden;}
#overlay    {  background:rgba(0,0,0,.75);
               text-align:center;
               padding:45px 0 66px 0;
               opacity:0;
               -webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}
#box:hover #overlay {
               opacity:1;}
#plus       {  font-family:Helvetica;
               font-weight:900;
               color:rgba(255,255,255,.85);
               font-size:96px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"box hover"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"box hover" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"box hover"
Bootstrap 3.0.0 Snippet by evarevirus