Geek Answers Handbook

HTML / CSS - the problem of switching to Hover

first here is the fiddle: http://jsfiddle.net/krish7878/C7D89/

It has a container with an image, it also has a div with a class overlay. What I'm trying to achieve is hover over the circle that should be filled with the overlay. It becomes filled, but it also shows uncomfortably from square to circle. How can I get rid of him.

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;
 }
+4
source share
2 answers

You just need to apply border-radiusto the div .overlay.

.overlay{
    border-radius: 50%;
}

FIDDLE Work

+3
source

. , , 50%.

.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;
}

: http://jsfiddle.net/teddyrised/C7D89/2/

+2

More articles:


All Articles