html - Slide out label with css3 transitions -


I have the following, this is the label with a numeric position with the number and marker text:

  & lt; span href = "#" class = "part-marker" & gt; & Lt; a href = "#" class = "marker-label" & gt; 1 & lt; Span & gt; & Amp; Nbsp; Marker text & lt; / Span & gt; & Lt; / A & gt; & Lt; / Span & gt;   

How can I slide it over the hover using CSS 3 transition? I have tried to use it successfully ??

See below a simplified version - here is the root that you can not make a transition to properties Which do not scale, so from where you have going from display: any t inline-block , this hidden is shown because there are no arbitrator digits I Instead you can use a combination of max-width and overflow in the form below.

HTML

  & lt; Div & gt; & Lt; A href = '#' & gt; 1 & lt; / A & gt; & Lt; Period & gt; Label & lt; / Span & gt; & Lt; / Div & gt;   

css

  one {display: inline-block; Background: blue; White color; Padding: 0 5px; } Div {status: relative; } Div span {Status: Absolute; display: inline-block; Max-width: 0; Hidden flurry; Transition: All 1s in Ease; } A: hover + duration {max-width: 100%; }    

Comments

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -