CODEWITHSUNDEEP
htmlcssopacity
chandan
chandan

Reputation: 1574

HTML/CSS - On Hover Transition issue

firstly here's the fiddle: http://jsfiddle.net/krish7878/C7D89/

There is a container with a image in it, it also has a div with class 'overlay'. What I am trying to achieve is, on mouse hover the circle should be filled with the overlay. It is getting filled but it also shows an awkward from square to circle. How do I get rid of it.

HTML Code:

<div class="container">
   <img src="#">
   <div class="overlay">
   </div>
</div>

CSS code:

 .container{
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    overflow: hidden;
    margin: 0 auto;
    }
 .overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #49c8ff;
    opacity: 0;
    top: 0px;

transition:         all 300ms ease;;
                    -moz-transition:    all 300ms ease;
                    -webkit-transition: all 300ms ease;
                    -o-transition:      all 300ms ease;
                    -ms-transition:     all 300ms ease;
  }
.container:hover .overlay{
    opacity: 1;
 }

Upvotes: 4

Views: 131

Answers (2)

aniskhan001
aniskhan001

Reputation: 8521

You just need to apply border-radius to the .overlay div also.

.overlay{
    border-radius: 50%;
}

Working FIDDLE

Upvotes: 3

Terry
Terry

Reputation: 66103

Simply apply the same border radius to the overlay element. Also, since radius is half of the diameter, declaring a border radius of 50% is sufficient :) 

.overlay{
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #49c8ff;
    opacity: 0;
    top: 0px;
    transition:         all 300ms ease;
                        -moz-transition:    all 300ms ease;
                        -webkit-transition: all 300ms ease;
                        -o-transition:      all 300ms ease;
                        -ms-transition:     all 300ms ease;
}

See fiddle here: http://jsfiddle.net/teddyrised/C7D89/2/

Upvotes: 2

Related Questions