Posted By

robnilas on 01/21/17


Tagged


Versions (?)

Circular Photo


 / Published in: CSS
 

  1. .hcard .photo {
  2. position: absolute;
  3. top: -45px;
  4. left: -136px;
  5. border: 10px solid #fff;
  6. -moz-box-shadow: 0 0 4px rgba(0,0,0,0.3);
  7. -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.3);
  8. box-shadow: 0 0 4px rgba(0,0,0,0.3);
  9. line-height: 200px;
  10. text-align: center;
  11. font-size: 85px;
  12. color: #ccc;
  13. }
  14.  
  15.  
  16. .hcard .photo, .hcard .photo:after, .hcard img {
  17. width: 200px;
  18. height: 200px;
  19. -moz-border-radius: 50%;
  20. -webkit-border-radius: 50%;
  21. border-radius: 50%;
  22. -khtml-border-radius: 50%;
  23. overflow: hidden;
  24. }
  25.  
  26. .hcard .photo:after {
  27. content: "";
  28. display: block;
  29. position: absolute;
  30. top: 0;
  31. left: 0;
  32. -moz-box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
  33. -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
  34. box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
  35. }
  36.  
  37. .hcard img {
  38. overflow: hidden;
  39. margin: 0;
  40. background: #eae8e9;
  41. }
  42.  
  43. .hcard img {
  44. margin: 0;
  45. }

Report this snippet  

You need to login to post a comment.