"circle and overlay"
Bootstrap 4.1.1 Snippet by chiefkilawila

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <h2>circle with image overlay on hover</h2> </div> <div class="row"> <div class="col-md-3 block"> <div class="circle"> <img class="circle" src="http://lorempixel.com/850/850/?random=123" alt=""> <div class="circle img__overlay"><p>Total Business Served +120</p></div> </div> </div> <div class="col-md-3 block"> <div class="circle"> <img class="circle" src="http://lorempixel.com/850/850/?random=123" alt=""> <div class="circle img__overlay"><p>Total products sold +340K TONS</p></div> </div> </div> <div class="col-md-3 block"> <div class="circle"> <img class="circle" src="http://lorempixel.com/850/850/?random=123" alt=""> <div class="circle img__overlay"> <p>Total Customers served +200K TONS</p></div> </div> </div> <div class="col-md-3 block"> <div class="circle"> <img class="circle" src="http://lorempixel.com/850/850/?random=123" alt=""> <div class="circle img__overlay"> <p>Total Data Analysed +500 TB</p></div> </div> </div> </div> </div> </body>
.block { border: 0px solid green; text-align: center; vertical-align: middle; } .circle { background: #62a087; border-radius: 400px; color: white; height: 400px; font-weight: bold; width: 400px; display: table; margin: 20px auto; } .circle p { vertical-align: middle; font-size: 40px; display: table-cell; } .circle H1 { vertical-align: middle; display: block; } .circle H1 i.fa { display:inline-block; border-radius: 60px; box-shadow: 0px 0px 2px #888; padding: 0.5em 0.6em; } .img__overlay { align-items: center; bottom: 0; display: flex; justify-content: center; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: opacity 0.25s; z-index: 1; } .img__overlay { background-color: rgba(46,204,113,0.4); background: linear-gradient(65deg, rgba(46,204,113,0.4), rgba(243,156,18,0.4)); color: #fafafa; font-size: 24px; } .img__overlay:hover { opacity: 1; } .image-wrapper { width: 100%; height: 100%; background-color: #000; border-radius: 50%; margin: 0; padding: 0; } .circle img { width: 100%; height: 100%; margin: 0; padding: 0; display: block; border-radius: 50%; }

Related: See More

Paper Kit 2
loading circle
Sonar Wave Effect in Circle With CSS
circle progress bar

Questions / Comments: