CODEWITHSUNDEEP
htmlcssflexbox
Yel Kizon
Yel Kizon

Reputation: 43

How can I turn my image into a full circle?

HTML

    <section class="section-about">
<div class="about">     
<figure class="about__shape">
<img src="https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c61d76abcdd6b0f7ef174e0da66a18d&auto=format&fit=crop&w=634&q=80" alt="" class="about__img">
<figcaption class="about__caption">Person's Name</figcaption>
</figure>  

<div class="about__desc">
<h1 class="u-margin-bottom-small heading-tertiary">About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis officia architecto ea blanditiis dolor. Quas aliquid suscipit commodi possimus, tempore est odio alias aut fugiat aliquam perspiciatis ratione dolorem quaerat, odit esse hic ab quam ducimus? Quo repellendus consectetur dicta eligendi, rerum id laboriosam excepturi nam dolore voluptatibus consequuntur! Voluptatem quia possimus eius fuga adipisci, minima vero incidunt maxime vel! Labore similique, dolores impedit amet iusto incidunt accusantium nemo atque harum quas nesciunt ipsa fugit repellendus. Quos placeat obcaecati similique nulla ipsum quae reprehenderit, quaerat deserunt soluta in quis fugiat dicta. Iusto ducimus earum, id adipisci illo voluptatibus quidem commodi?</p>
</div>
</div>
</section>

CSS

.section-about {
    background-color: #f6f6f6;
    margin-top: -20vh;
    height: 65vh;
    padding: 20rem 5rem;
    transform: skewY(-6deg);


    & > * {
        transform: skewY(6deg);
    }
}

.about {
    display: flex;
    text-align: center;
    width: 100%;


    &__shape {
        width: 15rem;
        height: 15rem;
        transform: translateX(3rem);
        position: relative;
        overflow: hidden;
        border-radius: 50%;

        @supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
            -webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);
            -webkit-shape-outside: circle(50% at 50% 50%);
            shape-outside: circle(50% at 50% 50%);
            border-radius: none;
        }
    }

    &__img {
        height: 100%;
        width: 100%;
        transform: translateX(0) scale(1.4);
        backface-visibility: hidden;
        transition: all .5s;
    }

    &__caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 20%);
        color: #fff;
        text-transform: uppercase;
        font-size: 1.7rem;
        text-align: center;
        opacity: 0;
        transition: all .5s;
        backface-visibility: hidden;
    }

    &:hover &__caption {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    &:hover &__img {
        transform: translateX(0) scale(1);
        filter: blur(3px) brightness(80%);
    }

    &__desc {
        align-self: center;
        margin-top: -4rem;
        margin-left: 15rem;
        width: 100%;
    }

}

I can't turn my image into a full circle. I don't know if it has something to do with me using the flexbox as my layout or the padding. I tried fixing it and putted it in a blank page, adjusted the width of the image and the transform code and it worked but when I putted in my original project, the image won't turn into a full circle. Here's a link of my Codepen of the exact problem: https://codepen.io/QuizonM/pen/ZjLOQJ

Upvotes: 0

Views: 122

Answers (2)

Manoj
Manoj

Reputation: 1195

in your case you don't need border radius because image is not square. you need to adjust height and width of image and remove radius. using below css should give an idea.

just changed height somewhat less that half of width.

 .about__shape {
    width: 16rem;
    height: 7.6rem;
    transform: translateX(3rem);
    position: relative;
    overflow: hidden;
    /* border-radius: 75%; */
}

Upvotes: 2

Chris Hitchcock
Chris Hitchcock

Reputation: 399

Your webkit clip path is what's causing this

https://i.sstatic.net/miYB4.jpg

Not sure if you need the clip or not for anything else.

If you want a full circle, delete your overflow:hidden in &__shape you get this.

Removed overflow:hidden;

&__shape {
    width: 15rem;
    height: 15rem;
    transform: translateX(3rem);
    position: relative;
    border-radius: 50%;

    @supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
        -webkit-clip-path: circle(50% at 50% 50%);
        clip-path: circle(50% at 50% 50%);
        -webkit-shape-outside: circle(50% at 50% 50%);
        shape-outside: circle(50% at 50% 50%);
        border-radius: none;
    }
}

If you want the oval delete the @supports and everything following it to get this

Removed @supports and the rest of the clip:

&__shape {
    width: 15rem;
    height: 15rem;
    transform: translateX(3rem);
    position: relative;
    overflow:hidden;
    border-radius: 50%;
}

Hope this helps and was what you were looking for.

Upvotes: 3

Related Questions