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

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