Grow your CSS skills. Land your dream job.

circular images using css3

  • # March 19, 2013 at 3:52 pm

    I have this one small issue that I wish to seek advise for.
    I made this html element to display the image in a circle:
    > < div class="circular">
    > < img src="breeze.jpg" alt='breeze' >
    < /div>
    and wrote the following css:

    .circular {
    float: center; width: 200px; height:200px;
    -webkit-border-radius: 100px;
    background: url(images/breeze.jpg) no-repeat ;
    -webkit-background-size: cover;
    -webkit-transform: scale(.8);
    -webkit-transition: all 100ms ease-out;
    }
    .circular img {
    opacity: 0;
    }
    .circular:hover {
    -webkit-transform: scale(.9);
    background: url(images/breeze.jpg) no-repeat top;
    -webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
    }

    so the problem if I don’t put the image tag and only use div with the image as its background .. i can’t drag the image out for obvious reasons .. but if do put in the image tag with opacity = 0 …
    and then try to hover over the circular image, the hover state is observed even before i try to reach it when approaching from the right margin.
    I believe that despite the fact that the image is hidden it is still there and its hampering the hover state.

    so is there a way .. I can have the drag and drop functionality of the image and still not mess my hover state effect?

    # March 19, 2013 at 5:43 pm

    first of all theres no such thing as float: center

    second of all the corner thing happens because the browser still interprets the element as a square, but the display that we see is circle because off CSS

    this is an interesting topic though not sure if there is a solution here yet.

    # March 20, 2013 at 6:23 am

    This might help…apply the border radius / transform / transition to the image.

    http://codepen.io/Paulie-D/pen/txbnv

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".