<blockquote class="tweet-this"><p>It's not that I'm so smart, it's just that I stay with problems longer.
  <span>- Albert Einstein</span></p>
</blockquote>

@import url(https://fonts.googleapis.com/css?family=Glegoo);

html {
  background: #222;
  color: #fff;
  font-family: 'Glegoo', serif;
}

blockquote {
  position: relative;
  margin: 80px auto;
  width: 400px;
  font-size: 48px;
  line-height: 56px;
  padding-left: 40px;
  border-left: 2px solid #fff;
}

blockquote span {
  display: block;
  text-align: right;
  font-size: 24px;
  line-height: 40px;
  margin-top: 10px;
  text-transform: uppercase;
}

blockquote.tweet-this:hover p {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

blockquote.tweet-this .tweet-quote {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 26px;
  margin-top: -13px;
  margin-left: -36px;
  transition: all 0.2s ease;
}

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

// Blockquote tweet this button on hover
	
$('blockquote.tweet-this').hover(function() {

  var blockQuoteText = $(this).text();
  var currentUrl = window.location;

  $(this).append('<div class="tweet-quote"><a href="https://twitter.com/share" data-text="' +blockQuoteText+ '"  class="twitter-share-button" data-via="doodlemarks" data-url="' +currentUrl+ '" data-size="large" data-count="vertical">Tweet</a></div>');

  $('.tweet-quote').hide().fadeIn(200);

  twttr.widgets.load();

  }, function() {
    $('.tweet-quote').remove();
});