javascript – how to do a 50% hover overlay effect for a circular image-ThrowExceptions

Exception or error:

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.

enter image description here

thanks in advance.

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

How to solve:

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>

###

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

###

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

###

#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>

Leave a Reply

Your email address will not be published. Required fields are marked *