如何为圆形图像制作 50% 悬停叠加效果

Question

I have a functionality in my website that when the user hovers on his/her display picture an overlay will appear.

But sadly I want the overlay not to cover up the entire photo. I want it to be just half of the circle.

I have tried researching for solutions but I can't seem to find any solution to this.

Here is an image of how I want it to look like.

thanks in advance.

And i would really appreciate it if you would guide me on how to achieve this effect.

Answer 1

The trick is, to add overflow:hidden to the container (circle) and make the overlay half the height of the circle. Here is an example code:

 #circle{ width:200px; height:200px; border-radius:50%; background-color:#0098dd; position:relative; overflow:hidden; } #overlay{ display:none; position:absolute; bottom:0; text-align:center; width:200px; height:100px; /* Half of the container */ line-height:100px; background-color:rgba(255,255,255,0.5); } #circle:hover #overlay{ display:block; }

 <div id="circle"> <div id="overlay"> Test </div> </div>

Answer 2

parent div will have position:relative; and overflow:hidden; . the overlay will have position:absolute; with top:50%; (to cover only the bottom half of the parent).

To make it appear :

First Method : You can set .overlay to display:none; and .con:hover .overlay to display:block;

Second Method: You can set .overlay to top:100%; transition:top 0.5s; top:100%; transition:top 0.5s; and .con:hover .overlay to top:50%; . The transition is added to make the change slow.

Check out the snippet below which uses second method. Also I used font-awesome for the icons.

 .con{ width:150px; height:150px; border-radius:75px; background-image:url("http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"); background-size:cover; overflow:hidden; position:relative; } .overlay{ position:absolute; top:100%; left:0; padding-top:10px; text-align:center; width:100%; height:100%; background-color:rgba(255,255,255,0.5); transition:top 0.5s; } .con:hover .overlay{ top:50%; } .overlay a{ margin:5px; font-size:1.6em; }

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="con"> <div class="overlay"> <a><i class="fa fa-briefcase"></i></a> <a><i class="fa fa-list"></i></a> </div> </div>

Answer 3

You have to use overflow: hidden; Please check this jsfiddle

https://jsfiddle.net/3jdb1m7e/

i hope you like with transition .

<div class="img-box">
  <img src="http://placehold.it/350x350" class="image">
  <div class="img-content">
  <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/96-128.png" width="36px" height="36px" /></a>
  <a href="#"><img src="https://cdn0.iconfinder.com/data/icons/internet-and-web-flat-icons-free/512/Menu_icon-128.png" width="36px" height="36px"/></a>
  </div>
</div>

.img-box {
position: relative;
    text-align: center;
    display: block;
    border-radius: 105px;
    overflow: hidden;
    width: 200px;
    height: 200px;
    border: 1px solid #333;
}
.img-box .image{
      border-radius: 50%;
    width: 100%;
}
.img-content {
  padding: 40px;
    background: #fff;
    position: absolute;
    bottom: -120px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}
.img-box:hover .img-content{
  bottom: 0px;
  transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}