How to expand an abbreviated word onhover in html via css or javascript or even using jquery?


Tags: javascript,jquery,html,html5,css3

Problem :

For my portfolio website I am using my name as the logo and I thought why not be a bit more innovative and creative and instead of making my name use my initials and onmousehover have initials expand in a specific order.

For example If I used TTS as the logo and on hover have the TTS Logo expand to Text To Speech and when the mouse is not hovering have it revert to TTS. In my head I would like a typewriter effect where TTS is stationary and onhover have Text To Speech where the bold and the space are added when hovered. I tried googling this issue in a few different ways and was not able to find any results. If anyone has any suggestions on how I can solve this problem I would greatly appreciate the help. I have used both javascript, and jquery on my website so either would work for me. It is based off of a HTML5 and CSS with very minimal PHP code along with the javascript and jquery aspect. So I should be able to implement most solutions if anyone has any ideas.



Solution :

you can do something like this

span {
  display: inline;
}
span:after {
  width: 0px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  transition: .2s linear;
}
span:nth-child(1):after {
  content: 'ext ';
}
span:nth-child(2):after {
  content: 'o ';
}
span:nth-child(3):after {
  content: 'peech ';
}
div:hover span:nth-child(1):after {
  width: 24px;
}
div:hover span:nth-child(2):after {
  width: 14px;
}
div:hover span:nth-child(3):after {
  width: 50px;
}
<div>
  <span>T</span>
  <span>T</span>
  <span>S</span>
</div>


    CSS Howto..

    how to Resize Quick TIme Player to the size of an HTML/CSS DIV

    How to align div blocks to be aligned in grid?

    how to clip text in css like gmail does to emails subject listings

    How to Set Two Transition Durations for Multiple CSS Transforms

    How to put multiple Bootstrap inputs on same line?

    How to hide a div on certain pages using CSS

    How to change buttons to pictures in jquery dialog

    How can I make this button image appear in Firefox 2.0 the same as it does in IE7?

    Polymer 1.0 how can I style a paper-input:disabled?

    How can I get to see the full image in the background?

    JQuery: Creating boxed text that shows on top of a div on hover

    How to calculate percentages in LESS CSS?

    How to Center Rotated text with CSS

    How to create a button to every list item which opens a menu over it?

    How to use CSS to style 4 blocks of Info in the homepage?

    How can I figure out how much a div shifts when a translate:scale is applied?

    How to make font size independent of screen resolution and monitor size?

    JavaScript: How to clear my custom keyboard mappings and use the default ones

    How to implement padding-free sprites in css?

    How to modify multiple elements of a block with BEM CSS

    How to stick a div when scrolled past 50% of the item?

    css - how to get floated divs to stack when you zoom in

    how to define minimum height for tbody in css

    Use css to not show the text box

    How to display contents of several div tags in a same line

    Images not showing in PhoneGap Build application

    How to edit ol tags in rich text editor

    How do I get a div that appears on hover to overlap all others, without using absolute positioning?

    How to align two text boxes on same line with CSS

    How to target all elements, except last one with css?