"Facebook Profile Picture hover effect"
Bootstrap 4.1.1 Snippet by sandipvala

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 ----------> <html> <head> <title>Facebook Profile Picture</title> <style> </style> </head> <body> <div class="main"> <div class="facebook-circle"> <div class="inner-facebook-circle"></div> </div> </div> </body> </html>
.main{ z-index:1; position: relative; } .main .facebook-circle{ position:relative; border:1px solid #000; border-radius:50%; height:150px; width:150px; margin:0 auto; cursor:pointer; z-index:1; overflow:hidden; background:blue; } .inner-facebook-circle{ content:""; position:absolute; border-color:#000; border-bottom-left-radius: 90px; border-bottom-right-radius: 90px; background:black; left:0px; bottom:-75px; z-index:-1; height:75px; width:150px; opacity:0.5; transition:0.3s ease; } .facebook-circle:hover .inner-facebook-circle{ bottom:0px; transition:0.3s ease; }

Related: See More

Bootstrap Wizard
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: