Question

I currently have a div appearing on hover, but it just pops up rather than sliding in:

#home-heroImage{
  padding: 0px;
  margin: 0px auto;
  width:980px;
  height: 525px;
  position: relative;
  z-index: 1;
  background-color: #fcba2e;
}

#home-hero-pop{
  background-color: #ffffff;
  opacity:0.8;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  font: 16px Helvetica,Arial,sans-serif;
  font-weight: bold;
  color: #6d6e70;
  text-align: left;
  padding: 10px;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 505px;
  width: 460px;
  z-index: 2;
}

Fiddle.

After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don’t know much about JavaScript or jQuery so the modifications I’ve tried to make to this code are not producing the desired effect:

$(document).ready(function(){
    $('.up-down').mouseover(function(){
        $('.default').stop().animate({
            height: 0    
        }, 200);                        
    }).mouseout(function(){
        $('.default').stop().animate({
            height: 200 
        }, 200)    
    })

});

Fiddle.

I’ve tried reading several JavaScript articles online but they’re over my head right now.

Answer 1

Based on the example you give, here’s it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/

EDIT 2017

Too much jQuery

You’re right, here’s a CSS alternative

.left-right {
    overflow:hidden;
    height:200px;
    width:200px;
    position:relative;
    background-color:#333;
}
.slider {
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:-200px;
    background-color:#000;
    color:#fff;
    transition:0.4s ease;
}

.left-right:hover .slider {
  right:0;
}

<div class="left-right">
  <div class="slider">Welcome !</div>
</div>