/* the navbar-brand has two <span> children. The first contains the 'C'. The second contains the 'utespot' */ /* target the siblings of the first span in .navbar-brand */ .navbar-brand span + span { margin-left: 5px; /* we change the letter spacing to negative, so that the letters bunch up on top of each other. We use 'em' so that the spacing is relative to the element's font-size */ letter-spacing: -0.52em; /* make it disappear */ opacity: 0; /* we want it to animate -- just means move. when a css attribute changes, it will 'tween' between its old value and its new */ /* we could target the transition to just work on opacity and letter-spacing, but 'all' is quick here*/ transition: all 0.3s ease-out; } .navbar-brand:hover span + span { /* on hover, we spread the letters out again */ /* since we set the transition (animate) to apply to all attributes, this change in letter-spacing will be animated (from its old value of -0.52em to its new of 0.1em) */ letter-spacing: 0.1em; /* make it visible -- the transition:all will also apply to the opacity, so the opacity will also animate between its old value (0 - transparent) and its new (1 - opaque)*/ opacity: 1; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter