0

I was creating a portfolio, and I want it so that whenever someone hovers over my name, a bubble with an arrow appears. I've done that part already, but the problem is that the -webkit-transition property isn't working. The bubble is a little far to my name so I want it so that it takes a little bit of time to hide again, so someone can go to it easily because I'm thinking of making a form to contact me in it.

My HTML:

<div id="side-bar"><h1 id="ab_me">About Me</h1>
<img src="saksham.png" id="saksham">
<p id="name"><span>S</span>aksham <span>C</span>hauhan</p>

<div id="bubble">
SUP !
<div id="bubble-arrow-border">
</div>
<div id="bubble-arrow">
</div>
</div>

</div>

My CSS:

div#side-bar p
{
font-size:25;
border-bottom:2px solid red;
position:absolute;
left:10px;
color:#F63737;
}
div#side-bar p:hover
{
border-bottom:2px groove #C01F1F;
color:#C01F1F;
text-shadow:0px 1px 2px #F98378;
-webkit-transition:1s;
}
div#side-bar p span
{
font-size:40px;
}
div#side-bar p:hover ~ #bubble
{
display:block;
visibility:visible;
opacity:1;
-webkit-transition:5s;
}
div#side-bar p #bubble:hover
{
display:block;
visibility:visible;
opacity:1;
}
#bubble
{
background-color:#EDEDED;
visibility:hidden;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
padding:10px;
position:absolute;
text-align:center;
width:300px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
z-index:100;
left:230px;
top:400px;
display:none;
-webkit-transition:5s;
opacity:0;
}
#bubble-arrow
{
border-color:transparent #EDEDED transparent transparent;
border-style: solid;
border-width: 15px;
height:0;
width:0;
position:absolute;
bottom:25px;
left:-28px;
z-index:100;
}
#bubble-arrow-border
{
border-color:transparent #666666 transparent transparent;
border-style: solid;
border-width: 15px;
height:0;
width:0;
position:absolute;
bottom:25px;
left:-31px;
}
Charlie
  • 11,380
  • 19
  • 83
  • 138
Thakur Saksham Chauhan
  • 186
  • 1
  • 3
  • 9

3 Answers3

1

When you are using a transition you must have both "before" and "after" states set (e.g. you cant transition from nothing to opacity:0 but you can from opacity:1 to opacity:0). Also, you can't have a transition on display but you can on visibility.

Here's some more about transitions: https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

xpy
  • 5,481
  • 3
  • 29
  • 48
  • Okay, i GET YOUR POINT, but i've never used the after and before selectors... can you pls frame an apropriate solution? And please try avoiding javascript. Thanks. – Thakur Saksham Chauhan Mar 03 '13 at 11:31
  • 1
    I'm not talking about `before` and `after` selectors but for the states of the element before and after the transition, meaning 'from' and 'to'. To be more clear: `#bubble { opacity:0}` is the 'from' state and `#bubble:hover { opacity:1} is the `to` state. Sorry for any confusion. – xpy Mar 03 '13 at 11:36
0

You have to tell it what properties to transition. It looks like you're trying to do this:

transition:all 1s ease;
-webkit-transition:all 1s ease;
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • I think that that is optional as the initial values of the `transition` property for `property` and `timing-function` are `all` and `ease` https://developer.mozilla.org/en-US/docs/CSS/transition – xpy Mar 03 '13 at 09:35
0

Don't post your entire code, only relevant code.

CSS transitions don't work well with display:none. When I had to use display:none, I had to use Javascript to supplement my CSS.

So, if you remove display:none from #bubble, and then use:

-webkit-transition:all 1000ms;

On #bubble, and then have #bubble:hover set to change the opacity to 1:

opacity:1;

Your bubble will fade in, and then fade out.

http://jsfiddle.net/charlescarver/nrTMg/1/

Charlie
  • 11,380
  • 19
  • 83
  • 138