CODEWITHSUNDEEP
jquerycsshover
khurram
khurram

Reputation: 946

how to make a circle hover on an image

.ec-circle{
width: 420px;
height: 420px;
-webkit-border-radius: 210px;
-moz-border-radius: 210px;
border-radius: 50%;
text-align: center;
overflow: hidden;
font-family:'Kelly Slab', Georgia, serif;
background: #dda994 url(../images/1.jpg) no-repeat center center;
box-shadow:
    inset 0 0 1px 230px rgba(0,0,0,0.6),
    inset 0 0 0 7px #d5ad94;
transition: box-shadow 400ms ease-in-out;
display: block;
outline: none;
}

above code is like what i want but not fulfill my need.

i want circle hover on my image.

it is the image of resolution 230 x 231. when hover on image,
it will shown only circle part.

how it will be?

Upvotes: 1

Views: 1403

Answers (2)

Mohsen
Mohsen

Reputation: 65785

You just need to change the border radius of image on hover 

img:hover{border-radius:50%}

Sidenote

Instead of calculating half of image size and give it to the image border radius value just give 50% to it!

Check the demo out here

Upvotes: 5

Abhranil Das
Abhranil Das

Reputation: 5918

You say the size of your image is around 230px square, but your circle class is of 420px square. I think if I understand your question, you should use a width and height of the circle that's smaller than the size of your image.

About the hover, firstly, I notice that you are using the image as a background, so I assume that the css class you have is for a div. But there is no :hover pseudo-class for divs, so you can't do the hover directly with css. If you want to change the style of one object on an event on another, you must use js.

Upvotes: 1

Related Questions