CODEWITHSUNDEEP
jqueryhtmlcss
Pedro Estevão
Pedro Estevão

Reputation: 1074

Slide div right to left inside image

I have an image and inside it I have a div that appears when hover the image. I want the exhibition of this div inside of the image be animated (slow), from right to left.

I got it so far from left to right but I just can't figure it out how to make it from right to left.

HTML

<div id="container">
    <div id="slider-div">
        some text
    </div>
    <img id="image" src="img.png">
</div>

jQuery

$("#image").hover(function(){
    $('#slider-div').animate({width:'toggle'},350);
});

CSS

#container {
    background: red;
    width: 200px;
    height: 200px;
    position: relative;
}

#image {
    height: 170px;
    width: 140px;   
}

#slider-div {
    background: green;
    width: 50px;
    height: 50px;
    position: absolute;
    display: none;
}

Upvotes: 0

Views: 1218

Answers (3)

misterManSam
misterManSam

Reputation: 24692

Note: It would probably be a good idea to use classes, which can be used more than once on the document and not ids, which can only be used once per document.

Want to simplify this with no jQuery?

For a simple hover action like this, jQuery seems like overkill and simple CSS can take care of all the looks here.

First, place the image before the slider div:

<div class="container">
    <img class="image" src="http://www.placehold.it/140X170">
    <div class="slider-div">some text</div>    
</div>

this allows you to target the slider div, when the image is hovered, with the adjacent selector (+) to increase its width:

.container img:hover + .slider-div {
    width: 50px;
}

The slider div is given:

  • right: 0 to stick it to the right
  • width: 0 and overflow: hidden to hide the text when not hovered
  • transition: width .3s, to create a smooth, animated width change
.slider-div {
    background: green;
    height: 50px;
    position: absolute;
    right: 0;
    width: 0;
    transition: width .3s;
    overflow: hidden;
}

Complete Examples

Only when the image is hovered.

.container {
  background: red;
  width: 200px;
  height: 200px;
  position: relative;
}
.image {
  height: 170px;
  width: 140px;
}
.slider-div {
  background: green;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  transition: width .3s;
  overflow: hidden;
}
.container img:hover + .slider-div {
  width: 50px;
}
<div class="container">
  <img class="image" src="http://www.placehold.it/140X170">
  <div class="slider-div">some text</div>
</div>

When any part of the container is hovered, using .container:hover .slider-div

.container {
  background: red;
  width: 200px;
  height: 200px;
  position: relative;
}
.image {
  height: 170px;
  width: 140px;
}
.slider-div {
  background: green;
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  transition: width .3s;
  overflow: hidden;
}
.container:hover .slider-div {
  width: 50px;
}
<div class="container">
  <img class="image" src="http://www.placehold.it/140X170">
  <div class="slider-div">some text</div>
</div>

Upvotes: 1

Dario
Dario

Reputation: 280

#slider-div {
    background: green;
    width: 50px;
    height: 50px;
    position: absolute;
    display: none;
    right:0px;
}

Upvotes: 1

Tharaka Nuwan
Tharaka Nuwan

Reputation: 782

By default your #slider-div starts from left:0; position. So it will animate to the right. If you want to make it left just position your #slider-div at the beginning as right:0;.

Upvotes: 2

Related Questions