"box"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <body> <div class="callout"> <div class="callout-bg"> <div class="inner-circle"> <div class="inner-bg"> <div class="title"> <h2>Products</h2> <h4>Resources to Help</h4> </div> <div class="content"> <p>Our products serve engineers and professionals from many industries.</p> <div class="btn"> <a href="#">Learn More</a> </div> </div> </div> </div> </div> </div> </body>
.callout { position: relative; margin: 100px auto; width: 300px; height: 300px; overflow: hidden; border-radius: 50%; background: url("https://lh5.googleusercontent.com/-Tc4iNc3FfKI/Uf1DUDAT4bI/AAAAAAAAEKM/EGCX-OFmDgY/w1044-h783-no/IMG_0557.JPG") no-repeat center; background-size: auto 100%; font-family: 'Helvetica', sans-serif; vertical-align: middle; transition: all 0.5s; } .callout .callout-bg { padding: 30px; height: 240px; } .callout .callout-bg .inner-circle { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } .callout .callout-bg .inner-circle .inner-bg .title { background: white; padding: 30px 30px 15px; text-align: center; } .callout .callout-bg .inner-circle .inner-bg .title h2 { margin: 0; text-transform: uppercase; } .callout .callout-bg .inner-circle .inner-bg .title h4 { margin: 0; font-weight: 100; } .callout .callout-bg .inner-circle .inner-bg .content { background: white; padding: 0 30px 40px; opacity: 0; transition: all 0.5s; } .callout .callout-bg .inner-circle .inner-bg .content p { margin-top: 0; text-align: center; padding-top: 15px; border-top: 1px solid #eaeaea; } .callout .callout-bg .inner-circle .inner-bg .content .btn { text-align: center; } .callout .callout-bg .inner-circle .inner-bg .content .btn a { padding: 5px 15px 3px; background: #ff6600; border-radius: 15px; margin: 0 auto; color: white; text-transform: uppercase; text-decoration: none; font-size: 14px; line-height: 1; vertical-align: middle; } .callout .callout-bg .inner-circle .inner-bg .content .btn a:hover { background: #ff4400; } .callout:hover { transition: all 0.5s; background-size: auto 120%; } .callout:hover .callout-bg .inner-circle .inner-bg .content { opacity: 1; transition: all 0.5s; -webkit-transition: all 0.5s; }

Related: See More

Paper Kit 2

Questions / Comments: