How to Prevent the Appearance of Lines Around a Circle Created with clip-path

You may come across a situation when you create a circle using the CSS clip-path property and when applying a hover transition to it, straight lines appear around the circle. If so, read this snippet.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Solution with the CSS overflow property

In the example below, there is a circle created with the clip-path property, in which the image zooms out, and a filter is applied. Here, we use our <img> within the <figure> element and add <figcaption>.

To solve the problem described above, we add the CSS overflow property with its "overflow" value to the "travel_shape" class of the <figure> element.

Example of creating a circle with a transition:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      *,
      *::after,
      *::before {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
      }
      html {
        font-size: 55%;
      }
      body {
        padding: 2rem;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        font-weight: 300;
        line-height: 1.5;
        box-sizing: border-box;
      }
      .text {
        width: 70%;
        margin: 0 auto;
        box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
        background-color: #d1d1d1;
        border-radius: 5px;
        padding: 4rem;
        padding-left: 9rem;
        font-size: 1.7rem;
        transform: skewX(-12deg);
        margin-bottom: 10rem;
      }
      .travel-shape {
        width: 170px;
        height: 170px;
        float: left;
        -webkit-shape-outside: circle(50% at 50% 50%);
        shape-outside: circle(50% at 50% 50%);
        -webkit-clip-path: circle(50% at 50% 50%);
        clip-path: circle(50% at 50% 50%);
        transform: translateX(-3rem) skewX(12deg);
        overflow: hidden;
      }
      .travel-img {
        height: 100%;
        transform: scale(2.5);
        transition: all 0.2s;
        overflow: hidden;
      }
      .travel-text {
        transform: skewX(12deg);
      }
      .travel-caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 20%);
        color: #fff;
        font-size: 1.7rem;
        text-align: center;
        opacity: 0;
        transition: all 0.2s;
      }
      .text:hover .travel-caption {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
      .text:hover .travel-img {
        transform: scale(2);
        filter: blur(2px) brightness(70%);
      }
    </style>
  </head>
  <body>
    <div class="text">
      <figure class="travel-shape">
        <img src="https://images.unsplash.com/photo-1502791451862-7bd8c1df43a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="travel" class="travel-img">
        <figcaption class="travel-caption">Traveller</figcaption>
      </figure>
      <div class="travel-text">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to make a 
        type specimen book. It has survived not only five centuries, but also the
        leap into electronic typesetting, remaining essentially unchanged.
      </div>
    </div>
  </body>
</html>

Result

travel
Traveller
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.