circular images using css3

[fnaticshank]

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?

[elneco]

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.

[Paulie_D]

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

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

[Author]

Posts