We Keep Coding

how to do a 50% hover overlay effect for a circular image

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.

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">
<img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/96-128.png" width="36px" height="36px" />
<img src="https://cdn0.iconfinder.com/data/icons/internet-and-web-flat-icons-free/512/Menu_icon-128.png" width="36px" height="36px"/>
</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;
}

Issue with hover movement on navigation bar

I am working on a fictitious website for my portfolio and am stuck on why the hover is moving the words. It moves every time I hover over the word.
Here is the code:
nav{
position:fixed;
z-index:1000;
top:0;
bottom:0;
width:150px;
background-color:black;
color:white;
line-height:60px;
}
nav a{
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.3s;
}
nav ul{
list-style-type:none;
margin-top:100px;
text-align:center;}
nav ul li a{
text-decoration: none;
display:inline-block;
text-align:center;
color:#fff;
}
nav a:hover {
background-color: #EBEBEB;
color: black;
margin: 0.5em 0;
display:block;
cursor:pointer;
}
nav a: hover: after{
text-decoration: none;
display:inline-block;
text-align:center;
color:#fff;
}
I really appreciate any feedback.

nav a:hover { background-color: #EBEBEB; color: black; margin:
0.5em 0; display:block; cursor:pointer; }
When you change the margin, the element will move. Change it to margin:0;
nav a:hover {
background-color: #EBEBEB;
color: black;
margin: 0;
display:block;
cursor:pointer;
}
If you want some sort of movement effect to happen without breaking the layout, you can try playing with position:relative and top:0.5em

CSS Drop Down Menu - disappears too quickly on mouse out

I'm hoping one of you nice people can help. I have a pure CSS drop down menu, as part of the design it needs to be slightly away from the main menu item, the problem is that because of this design there's a gap - and so as soon as the mouse moves away from the sub menu it disappears. I want it to hold their for a while longer so the user has more chance to click. Can anyone help?
I've set up a JS fiddle here.
<div id="menu" class="top">
<ul>
<li>home</li>
<li>about</li>
<li>portfolio
<ul>
<li>Overview</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
</div>
#menu{
position:absolute;
left:0;
zoom:1;
background-color:#010;
}
#menu ul{
position:relative;
border-top: dotted 1px #fff;
border-bottom: dotted 1px #fff;
padding:2px 0 2px 0;
float:right;
zoom:1;
list-style:none;
}
#menu ul li{
margin:0;
font:16px/16px 'Open Sans', sans-serif;
padding:0 5px 0 0;
display:inline;
position:relative;
zoom:1;
}
#menu ul li a{
color:#fff;
text-decoration:none;
}
#menu ul li a:hover{
text-decoration:underline;
}
#menu ul li.selected a{
color:#8dc63e;
}
#menu ul li ul {
border: 2px solid #fff;
border-radius:10px;
background-color: #8dc63e;
padding: 0;
position: absolute;
top: 45px;
right: -30px;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.8s;
-moz-transition: opacity 0.8s;
-ms-transition: opacity 0.8s;
-o-transition: opacity 0.8s;
-transition: opacity 0.8s;
}
#menu ul li ul li {
display: block;
border-bottom: 1px solid #fff;
color: #fff;
padding:10px;
}
#menu ul li ul li:hover { text-decoration:underline; }
#menu ul li.selected ul li a { color: #fff;}
#menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:250;
}
#menu ul li ul:after{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #fff transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 64px;
}

It seemed a bit of a mess, lots of duplication with display:none being set as well as opacity:0 and visibility:hidden. There are a few z-indexes in there as well. Not nice to maintain.
Really what you need is for the UL menu to be opacity 0, with a transition to fade it in over time, but not too quick, and then the hover state to be opacity 1.
So from fiddling with your fiddle...
#menu ul li ul {
border: 2px solid #fff;
border-radius:10px;
background-color: #8dc63e;
padding: 0;
position: absolute;
top: 45px;
right: -30px;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
opacity: 0;
-webkit-transiton: opacity 8s;
-moz-transition: opacity 8s;
-ms-transition: opacity 8s;
-o-transition: opacity 8s;
-transition: opacity 8s;
}
and
#menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:250;
}
This one works, http://jsfiddle.net/ydF3B/1/ although I set the transition to be 8s from 0.8s... you might want to dig through and remove all the unneccessary styles and see what is actually going on.
Have fun :)
EDIT Complete justification for my earlier comment about wanting to dig through it all, the fiddle above doesn't solve your issue as pointed out in the comments :) Instead a better approach is to make the area you are hovering over larger, so that when you pass over from the menu item onto the menu, there is no actual gap, even though there is a visual gap. I did this by increasing the padding: http://jsfiddle.net/ydF3B/2/

Darken img while exposing text on hover

Some images in my website needs to be darken when hovered, and also in the same time, to expose text that was hidden before that hover(the text will be displayed on top of the darken image).
I already implemented the img-darken part this way - http://jsfiddle.net/4Dfpm/.
What is a good way to implement the "expose text on hover(the same hover)" part?
Can it be done only with CSS, or I'll need to use a script this time ?
Thanks.
** How the img-darken part already implemented:
​
a.darken {
background: black;
}
a.darken img {
display: block;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}

CSS Solution
Worked on your jsfiddle and changed jsfiddle is http://jsfiddle.net/4Dfpm/55/
I have added < span > inside < a > tag with class=darken
<span>text</span>
And updated css is
a.darken{
...;
position:relative;
...
}
new css added is
a.darken span{position:absolute;top:5px;color:#000;left:10px}
a.darken:hover span{color:#fff;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}

Obvious jQuery solution: Add the message in the markup:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
<span class="message">Some message here</span>
</a>
Add some css:
a.darken span{
display:none;
position:absolute;
top:0px; left:0px;
float:left;
color:white
}
Sprinkle of JQuery:
$('.darken').hover(
function(){
$(this).find('.message').fadeIn(1000);
},
function(){
$(this).find('.message').fadeOut(1000);
}
);
Et Voila: http://jsfiddle.net/4Dfpm/56/

Use a script to do that
HTML:
<div class="hoverText">Some text</div>
Js:
$("img").hover(
function () {
$(".hoverText").show();
},
function () {
$(".hoverText").hide();
}
);​
Css:
div.hoverText{display = none;}
This a fiddle:
http://jsfiddle.net/HFgGx/
Adjust this mockup with your logic ;)

If you add a span inside the anchor, give it an RGBA color of white with no alpha, then on hover change the alpha value, you'll get the effect you want with CSS alone:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
<span>text</span>
</a>
Don't forget to position the span within the anchor, so that it doesn't display beneath the image.
a.darken {
display: inline-block;
background: black;
padding: 0;
position: relative;
}
a.darken span
{
position: absolute;
top: 10px;
left: 10px;
color: rgba(255, 255, 255, 0);
}
a.darken:hover span
{
color: rgba(255, 255, 255, 1);
}
​http://jsfiddle.net/Kyle_Sevenoaks/4Dfpm/57/

Check the fiddle :
http://jsfiddle.net/4Dfpm/59/
all done throught css. althought you can achieve it with jQuery too,
your html i edited little bit:
<a href="http://google.com" class="darken">
<img src="http://callzeb.com/themes/images/JQuery_logo.png">
<span>123</span>
</a>
and edited little bit of css too:
a.darken {
display: inline-block;
background: black;
padding: 0;
width:229px;
height:200px;
overflow:hidden;
position:relative;
text-align:center;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
a.darken:hover span{
display:block;
position:absolute;
z-index:9999;
bottom:10px;
color:red;
font-size:24px;
}
span{display:none;}

Try this http://cssdesk.com/hrKeE
.captioned {
position:relative;
display:inline-block;
}
.captioned img {
display:block;
}
.captioned .caption {
position:absolute;
top:0;
left:0;
display:none;
width:100%;
height:100%;
color:white;
background:rgba(0, 0, 0, .75);
}
.captioned:hover .caption {
display:block;
}

animate between css states?

Can I animate between hover states?
Eg:
#menu ul li a {
display:block;
margin:0px;
padding:0px;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin-right: 5px;
margin-left: 5px;
padding-left: 10px;
padding-right: 10px;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
border-bottom: 25px solid #0488C5;
So the bottom border would rise up from 0 to 25px.
I'm not sure if this is possible with CSS, or if I'd have to use jQuery?

You can use CSS3 transitions, but their support isn't that great at the moment:
#menu ul li a {
-webkit-transition: border .5s ease-in-out;
-moz-transition: border .5s ease-in-out;
-o-transition: border .5s ease-in-out;
transition: border .5s ease-in-out;
}
The syntax is: element time easing
Here's a Fiddle

Yep, just add a CSS transition.
in #menu ul li a {
just add:
-webkit-transition: border .5s ease-in-out;
-moz-transition: border .5s ease-in-out;
-o-transition: border .5s ease-in-out;
transition: border .5s ease-in-out;
You don't need an ms one by the way, IE10 doesn't use prefixes.
For loads more info, have a look at http://css3.bradshawenterprises.com/

You can do animations between css classes using jQuery UI
$( ".newClass" ).switchClass( "newClass", "anotherNewClass", 1000 );
You can also use it to animate css properties:
$( "#effect" ).animate({
backgroundColor: "#aa0000",
color: "#fff",
width: 500
}, 1000 );
This will animate from the current background color, color and width, to the ones you specify.

CSS3 transitions would do the job:
#menu ul li a {
display:block;
color:#FFF;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
margin: 0 5px;
padding: 0 10px;
-webkit-transition: border-bottom-width 0.5s ease-in-out;
-moz-transition: border-bottom-width 0.5s ease-in-out;
-o-transition: border-bottom-width 0.5s ease-in-out;
transition: border-bottom-width 0.5s ease-in-out;
}
#menu ul li a:hover {
color:#fff;
margin-bottom:5px;
padding-bottom:5px;
border-bottom: 25px solid #0488C5;
}