Hover effect

by webaschtl

HTML

<h3>Do it like <a href="http://one.ard.de/mediathek/" target="_blank">http://one.ard.de/mediathek/</a></h3>

<div id="aussen">
  <div id="innen">
    Ich bin innen.
    <br />Wo bist Du?
    <br /><a href="http://one.ard.de/mediathek/">Wohin geht die Reise?</a>
  </div>
</div>

CSS

#aussen {
	  background: cyan url(https://placeholdit.imgix.net/~text?txtsize=48&bg=ff6600&txtclr=eeeeee&txt=aussen&w=200&h=150);
	  width: 200px;
	  height: 150px;
	  border: 1px solid green;
	  overflow: hidden;
	}
	
	#innen {
	  width: 200px;
	  height: 150px;
	  background: yellow;
	  display: none;
	  position: relative;
	}

JavaScript

$(function() {
		  $("#aussen").hover(
		    function() {
		      //					$("#innen").a<nima();
		      $("#innen").show();
		      $("#innen").css("top", "150px");
		      $("#innen").animate({
		        top: 0
		      }, 300);

		    },
		    function() {
		      $("#innen").fadeOut();
		    });
		})