How to Make Circular Background Using CSS

How to add a circular background to a gif using css

Put the image inside a div and it works perfectly.

.img-box {
  background-color: #66BFBF;
  border-radius: 100%;
  width: 150px;
  padding: 23px;
}

.code-img {
  width: inherit;
}

<div class='img-box'>
  <img src="https://media.giphy.com/media/WFZvB7VIXBgiz3oDXE/giphy.gif" class="code-img" alt="Code">
</div>

Using before CSS, add circle in the background

.swiper-button-next:before {  content: '';  display: inline-block;  width: 50px;  height: 50px;  -moz-border-radius: 50%;  border-radius: 50%;  background-color: #060606;  margin-left: -53px;  margin-top: -11px;  opacity: 0.8;  z-index: -2;  position: relative;}
.swiper-button-next {  height: 25px;  padding-left: 62px;  padding-top: 0px;  margin-top: -13px;  z-index: 4 !important;  position: absolute;  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…2L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");  right: 10px;  left: auto;  top: 50%;  width: 27px;  cursor: pointer;  background-size: 27px 44px;  background-position: center;  background-repeat: no-repeat;}.arrow{ width: auto;  display: inline-block;  position: absolute;  z-index: 9999;  left: 31px;  vertical-align: middle;  color: #ffffff;  opacity: 0.3;  font-size:20px;}

<div class="swiper-button-next swiper-button-white"><div class="arrow">❯<div></div>

Expands background on a circle shape

You could run a transition over an inset box-shadow, like so

div {  width: 300px;  height: 300px;  display: flex;  color: #FFF;  justify-content: center;  align-items: center;  border-radius: 50%;  background: #03BF60;  cursor: pointer;  transition: box-shadow .75s 0s, color .5s 0s;  box-shadow: inset 0 0 0 0 #DCEDC8;}
div p {   color: inherit;  text-align: center;}
div:hover {  color: #444;  box-shadow: inset 0 0 0 150px #DCEDC8;}

<div>  <p>     Responsive design. I get this certificate by      learning HTML, CSS, web design, media query plus      animations using keyframes, declaring variables      on css and a lot of CSS components.  </p></div>

Circular background on icon when is hover - CSS

The result I got when I adapted the styles I got from this page to your project is available in the image below:

Sample Image

.btn {
    display: inline-block;
    text-decoration: none;
    width: 100px;
    height: 100px;
    line-height: 120px;
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    transition: .9s;
}

.btn-animation {
    opacity: 0.5;
    background-color: rgba(0, 0, 0, .15);
    text-align: center;
    width: 149px;
    height: 149px;
    border-radius: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color: black;
    font-weight: bold;
    text-decoration: none
}

.btn:hover {
    opacity: 1;
}

#container:after {
    content: '';
    opacity: 0;
    background-color: rgba(0, 0, 0, .15);
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-radius: 50%;
    pointer-events: none;
}

<div id="container">
    <div class="wrap">
        <a href="" class="btn btn-animation">
            <svg viewBox="0 0 20 20" width="2em" height="2em">
                <g fill-rule="evenodd" transform="translate(-446 -350)">
                    <path
                        d="M458 360a2 2 0 1 1-4 0 2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-12 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0">
                    </path>
                </g>
            </svg>
        </a>
    </div>
</div>

CSS Circle DIV with a background not in scale 1:1

To achieve a perfect circle of 30px diameter with the flag at the center:

#language-bar-invoker i {  display: inline-block;  width: 30px;  height: 30px;  border-radius: 50%;  background-color: #eee;  background-position: center center;  background-size: 150%;}
.eu {  background-image: url(https://c.tadst.com/gfx/750w/flag-day.jpg);}

<div class="u-language">    <a href="#" id="language-bar-invoker" class="u-icon-v1">      <i class="eu"></i>    </a></div>

Create Close-up Half Circle in HTML CSS

Heres some idea for you. you can set it to transform then rotate it at the same time put a fake div at the top so you can cover all remaining blue. Let me know.

body {background-color:lightgrey;}

.semi-circle { 
  height: 200px; 
  width: 200px; 
  border-radius : 50%;             
  background-color: #0E47A1; 
  margin-top:0px;
  transform: scale(1.5) rotateX(105deg);  
  overflow:hidden;
  align-items:center;
  margin-left:50px;

} 

.box { 
  width: 300px;
  height: 800px;
  border:1px solid gray;
  background-color:white;
  }
 
.blue {
  background-color:#0E47A1;
  height:100px;
  }

.whitebox {
  width:220px;
  height:40px;
  line-height:1;
  margin:0 auto;
  box-shadow: 2px 2px 4px 2px gray;
  text-align:center;
  padding:10px;
  border-radius:20px;
  position:absolute;
  top:120px;
  left:40px;
  background-color:white;
  }

<body> 
  
 <div>Home</div>
 
  <div class="box">
  <div class="blue">
   <div class="semi-circle"></div> 
    <div class="whitebox">Hello Visitors!
     <span>this is the hidden text......</span>
    </div>
   </div>
  </div>
 </body>

How can you create an empty circle using exclusively CSS?

 .half-circle {
        width: 60px;
        height: 120px;
        border-top-left-radius: 110px;
        border-bottom-left-radius: 110px;
        border: 10px solid gray;
        border-right: 0;
    }

HTML:

   <body>
        <div class ="half-circle"></div>
   </body>

Demo: https://jsfiddle.net/0zk8euj9/