├── README.md ├── cat.jpg ├── css └── style.css ├── img └── test.jpeg ├── index.html ├── style.css └── test.jpeg /README.md: -------------------------------------------------------------------------------- 1 | # CSS-Circle-Border-AroundImage 2 | 3 | 4 | 5 | https://user-images.githubusercontent.com/42389395/178111399-84350b8b-e2dc-469f-b5a5-9600b9832f53.mov 6 | 7 | -------------------------------------------------------------------------------- /cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Patalin/CSS-Circle-Border-AroundImage/b9d660b59cdeb02ca7075f98315abd987a750253/cat.jpg -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | .image { 2 | /* the magic */ 3 | display: block; 4 | width: 180px; 5 | height: 180px; 6 | overflow: hidden; 7 | -webkit-border-radius: 180px; 8 | -moz-border-radius: 180px; 9 | -ms-border-radius: 180px; 10 | -o-border-radius: 180px; 11 | border-radius: 180px; 12 | /* the rest */ 13 | position: relative; /* for the overlay later */ 14 | margin: 200px auto; 15 | text-align: center; 16 | margin-bottom: 10px; 17 | border: 3px solid #FFF; 18 | -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3),inset 0px 3px 8px rgba(0, 0, 0, 0.3); 19 | -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3),inset 0px 3px 8px rgba(0,0,0,0.3); 20 | box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3),inset 0px 3px 8px rgba(0, 0, 0, 0.3); 21 | } 22 | 23 | img { 24 | max-width: 100%; 25 | height: auto; 26 | vertical-align: middle; 27 | border: 0; 28 | /* make resized images look good in IE */ 29 | -ms-interpolation-mode: bicubic; 30 | } 31 | 32 | body { 33 | font: 300 16px/1.5 Helvetica, Arial, sans-serif; 34 | text-align: center; 35 | background: #f2eee3; 36 | } 37 | 38 | .image span { 39 | display: none; 40 | position: absolute; 41 | top: 0; 42 | right: 0; 43 | bottom: 0; 44 | left: 0; 45 | background: #888; 46 | background: rgba(0,0,0,.5); 47 | color: #fff; 48 | padding: 3em 1em 0; 49 | } 50 | 51 | .image:hover span { 52 | display: block; 53 | } -------------------------------------------------------------------------------- /img/test.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Patalin/CSS-Circle-Border-AroundImage/b9d660b59cdeb02ca7075f98315abd987a750253/img/test.jpeg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Circle Border Around Image 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | minion 16 | Add content for the link 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .image { 2 | 3 | display: block; 4 | width: 180px; 5 | height: 180px; 6 | overflow: hidden; 7 | -webkit-border-radius: 180px; 8 | -moz-border-radius: 180px; 9 | -ms-border-radius: 180px; 10 | -o-border-radius: 180px; 11 | border-radius: 180px; 12 | position: relative; /* for the overlay later */ 13 | margin: 200px auto; 14 | text-align: center; 15 | margin-bottom: 10px; 16 | border: 3px solid #FFF; 17 | -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3),inset 0px 3px 8px rgba(0, 0, 0, 0.3); 18 | -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3),inset 0px 3px 8px rgba(0,0,0,0.3); 19 | box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3),inset 0px 3px 8px rgba(0, 0, 0, 0.3); 20 | } 21 | 22 | img { 23 | max-width: 100%; 24 | height: auto; 25 | vertical-align: middle; 26 | border: 0; 27 | /* make resized images look good in IE */ 28 | -ms-interpolation-mode: bicubic; 29 | } 30 | 31 | body { 32 | font: 300 16px/1.5 Helvetica, Arial, sans-serif; 33 | text-align: center; 34 | background: #f2eee3; 35 | } 36 | 37 | .image span { 38 | display: none; 39 | position: absolute; 40 | top: 0; 41 | right: 0; 42 | bottom: 0; 43 | left: 0; 44 | background: #888; 45 | background: rgba(0,0,0,.5); 46 | color: #fff; 47 | padding: 3em 1em 0; 48 | } 49 | 50 | .image:hover span { 51 | display: block; 52 | } 53 | -------------------------------------------------------------------------------- /test.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Patalin/CSS-Circle-Border-AroundImage/b9d660b59cdeb02ca7075f98315abd987a750253/test.jpeg --------------------------------------------------------------------------------