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.

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" <span class="attribute">class</span> 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>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <div class="text"> <figure class="travel-shape"> <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> </div>