CODEWITHSUNDEEP
htmlcss
user1251698
user1251698

Reputation: 2143

Change position of div on hover

Consider following HTML. I have .image and .details wrapped in .wrap. Outside the .wrap, I have another div .extra, which I want to hide initially but on hover over the image div only, i want to slide it down so that it takes whole area of the .wrap.

I am trying following code, does not work:

HTML:

<div class="box">
    <div class="wrap">
        <div class="image"><img src="http://farm9.staticflickr.com/8075/8310628243_d48e64dc66_m.jpg" /></div>
        <div class="details">xxx</div>
    </div>

    <div class="extra">hidden, show on hover over .image</div>
</div>

CSS:

.box{
    border: 1px solid red;
    width: 240px;       
}

.image{
    border: 1px solid green;
    position: relative;     
}

.extra{
    position: absolute;
    top: -100%;
    left: 0;
    background: green;
}

.box .image:hover .extra{
    top: 0;
}

Demo: http://jsfiddle.net/pv9jd/

Upvotes: 0

Views: 1093

Answers (3)

Hearty
Hearty

Reputation: 543

Sorry to butcher your code but this may be able to help you:

<div class="box">
  <div class="image"></div>
</div>

This is the CSS:

.box div{
  color: #fff;
  width: 200px;
  height: 100px;
  position: relative;
  box-sizing: border-box;
  transition: border .7s ease;
}
.image{
  background: #fff url(http://farm9.staticflickr.com/8075/8310628243_d48e64dc66_m.jpg) bottom;
  border-top: solid 100px #ccc;
}

.image:hover{
  -webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
  border: solid 0px;
}

You can read more here for the sliding.

You can also play around here: http://codepen.io/joe/pen/oqxJu

Upvotes: 1

Raju
Raju

Reputation: 25

I believe you are looking for something like this image hover using jQuery

$('.image').hover(function(){
  $('.extra').css({'top' : '0'});
    },function(){
      $('.extra').css({'top' : '-100%'}
  );
});​

Upvotes: 1

wakooka
wakooka

Reputation: 1428

.extra is not a child of .image.

I updated the fiddle by replacing .image with .wrap:hover.

http://jsfiddle.net/UrKCs/2/

I'm not sure if you want that, because now the .extra appears when hovering the whole .wrap div.

I updated it again to have the hover on the image only

http://jsfiddle.net/UrKCs/5/

Upvotes: 1

Related Questions