We Keep Coding

How use Overflow Hidden and Position Absolute?

I wanted descriptionClass is show over itemClass when I make .slider-imgClass is Hover .......................
how use Jquery OR javascritp OR CSS ..............
html
<div id="carousel-example-generic">
<div data-ride="carousel" class="carousel slide carousel-fade" id="carousel-example-captions">
<div class="carousel-inner">
<div class="item active">
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
</div>
<div class="item ">
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
</div>
<div class="item ">
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
<div class="descriptoion">texttexfdlkfjddjkdldl<br/>djtdkdldldldldldld ldldldldlddldldldlddlld</div>
</div>
<div class="slider-img">
<img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
</div>
</div>
</div>
<a data-slide="prev" href="#carousel-example-captions" class="left carousel-control">
left
</a>
<a data-slide="next" href="#carousel-example-captions" class="right carousel-control">
right
</a>
</div>
css
.descriptoion{
border: 1px solid red;
bottom: 0;
color: red;
height: 250px;
line-height: 40px;
position: absolute;
right: -222px;
width: 200px;
word-wrap: break-word;
z-index: 1000;
background-color:#f0f0f0;
display:none;
font-size:20pt;
text-align:center;
}
.descriptoion:before{
position:absolute;
content:"";
border:20px solid transparent;
border-right:20px solid #f0f0f0;
top:50%;
left:-42px;
z-index:1000;
}
.descriptoion:after{
border:22px solid transparent;
border-right:22px solid red;
z-index:10001;
content: "";
left: -46px;
position: absolute;
top: 49%;
z-index: 1;
}
.slider-img:hover .descriptoion{
display:block;
}
jquery
$(".slider-img").hover(function(){
$(this).parent().parent().addClass('not-overflow');
});
$(".carousel > a").click(function(){
$(".carousel-inner").removeClass("not-overflow");
});
i have this problem
i wanted this style
UPDATEDEMO

Basically you have to remove the overflow:hidden property from .item-active and also from .carousel-inner.
If you see the cycle image breaking out of the div, limit the size of that image.
Also you seem to be having repetitive classes in your css file.
DEMO FIDDLE

On some window width make 4 unlisted list (ul) in to one

I have page on my site with events. Because all 'li' are not in same dimension I put them in four 'ul' and floated them left.
.DogadjajiLista{
width:225px;
margin-right:15px;
position:relative;
text-align:left;
float:left;
}
.DogadjajiLista li{
position:relative;
list-style:none;
width:225px;
display:block;
padding:0;
margin-bottom:15px;
overflow:visible;
float:left;
-moz-box-shadow: 2px 3px 2px #cecece;
-webkit-box-shadow: 2px 3px 2px #cecece;
box-shadow: 2px 3px 2px #cecece;
}
For responsive design I put them in display inline-block.
#media screen and (max-width: 768px) {
.DogadjajiLista{
width:100%;
text-align:center;
}
.DogadjajiLista li{
display:inline-block;
padding:0;
margin:10px 5px;
float:none;
}
}
Put my problem is when I have 3 'li' on smaller screen got to align them 2 'li' in row, then one 'li' in row. And after that secon 'ul' with same behaviour, so it doesent look pretty nice. So i wonder if is there some way in javascript or jquery to make four 'ul' into the one on smaller devices. I hope I explained well my problem.
Here You can se in responsinator.
http://www.responsinator.com/?url=http%3A%2F%2Fwww.anaizadar.com%2Fhr%2Fdogadjanja
Here is html
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj01.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj1_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj1_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>24.10.-27.10.2013.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj05.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj5_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj5_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>29.08.-31.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj09.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj9_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj9_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>29.08.-31.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj02.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj2_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj2_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>12.06.-15.06.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj06.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj6_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj6_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>08.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj10.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj10_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj10_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>30.06-04.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika2 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj03.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj3_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj3_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>06.06.-08.06.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj07.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj7_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj7_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>10.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj11.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj11_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj11_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>10.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>
<ul class="DogadjajiLista">
<li>
<div class="DogadjajiListSlika DogadjajiListSlika3 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj04.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj4_naslov?></h2>
<p style="margin:5px 0;"><?=$tekst_dogadjaj4_opis?></p>
</div>
<div class="DogadjajiListDownload">
<p>29.08.-31.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
<li>
<div class="DogadjajiListSlika DogadjajiListSlika1 Zumiraj">
<img src="/images/Dogadjaji/Dogadjaj08.jpg">
</div>
<div class="DogadjajiListNaslov">
<h2><?=$tekst_dogadjaj8_naslov?></h2>
<!--<p style="margin:5px 0;"><?=$tekst_dogadjaj8_opis?></p> -->
</div>
<div class="DogadjajiListDownload">
<p>23.08.2014.-29.08.2014.</p>
<img src="/images/DogadjajiLivo.png">
</div>
<div class="clear"></div>
</li>
</ul>

How to display video duration on onmouseover over video thumbs?

I got a page with video thumbs. I wonder how i can display video duration onmouseover (display the duration in a blackbox in lower left corner of image)the thumb image and hide it again onmouseout? currently as you see in demo the video duration is visiable at all time but i want to make it visiable only when user puts the mouse over the thumb image . I be happy if you guys help me do this task.Thanks in advance.
demo on fiddle :http://jsfiddle.net/shodaburp/k6yAQ/1/
<div class="ListSlideDown">
<div class="ListFadeIn">
<div class="CurrentPage">1</div>
<div class="IsLastPage">0</div>
<div class="SortColumn">latest</div>
<div class="Item ItemLeft">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid1" title="video1">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 1" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid1"><span class="Text">51:57</span>
</a>
</div>
<div class="Title">
video 1
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 604</div>
</div>
<div class="Item ItemMiddle">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid2" title="video2">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 2" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid2"><span class="Text">12:23</span>
</a>
</div>
<div class="Title">
video 2
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 7531</div>
</div>
<div class="Item ItemRight">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid3" title="video3‌">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video3‌" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid3"><span class="Text">17:36</span>
</a>
</div>
<div class="Title">
video 3‌
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 996</div>
</div>
<div class="LineSpacer3"></div>
<div class="Item ItemLeft">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid4" title="video4">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 4" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid4"><span class="Text">31:57</span>
</a>
</div>
<div class="Title">
video 4
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 604</div>
</div>
<div class="Item ItemMiddle">
<div class="Clipping">
<a class="ImageLink" href="/video/video5" title="video5">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video 5" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid5"><span class="Text">2:23</span>
</a>
</div>
<div class="Title">
video 5
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 2531</div>
</div>
<div class="Item ItemRight">
<div class="Clipping">
<a class="ImageLink" href="/videos/vid6" title="video6‌">
<img class="ItemImage" src="http://img.youtube.com/vi/bQVoAWSP7k4/0.jpg" alt="video6‌" />
<img class="OverlayIcon" src="http://shodaburp.com/jsfiddle/playbutton.png" alt="" />
</a>
<a class="DurationInfo" onmouseover="showDuration2(this);" onmouseout="hideDuration2(this);" href="/videos/vid6"><span class="Text">12:36</span>
</a>
</div>
<div class="Title">
video 6‌
</div>
<div class="VideoAge">1 day before</div>
<div class="PlaysInfo">broadcast: 196</div>
</div>
<div class="LineSpacer3"></div>
<div class="BottomFix"></div>
</div>
</div>

I don't see why would you need JavaScript in this case:
http://jsfiddle.net/DerekL/habb9/
Just use CSS:
.Clipping{ /*<--Change to .Clipping*/
position: relative;
}
.DurationInfo{
position: absolute;
bottom: 5px;
right: 5px;
display: none;
}
.Item:hover .DurationInfo{
display: block;
}
And you can even add a nice transition:
http://jsfiddle.net/DerekL/habb9/2/
.DurationInfo{
opacity: 0;
right: -5px;
transition: opacity .2s ease-in-out, /*Prefix not included*/
right .2s ease-in-out;
}
.Item:hover .DurationInfo{
right: -5px;
opacity: 1;
}

just in case you want to do with jquery you can use hover and mouseleave methods.
http://jsfiddle.net/btevfik/k6yAQ/4/

On clicking the link in a tabbed menu, need image to be visible for webpage?

On clicking the link in the tabbed menu i need image should appear in the position where i desired for all the number of links...Here is the code i used for sample...its not working for me...i need to knw the correct answer...help me out...
<html>
<head>
<title>image event</title>
<script type="text/javascript" ></script>
<style type="text/css">
#detail {
width:320px;
height:180px;
margin-bottom:12px;
border: 1px solid #000000;
}
#detail div {
position:relative;
width:100%;
height:100%;
}
#detail div img {
position: absolute;
top: 0;
left:0;
width:100%;
height:100%;
z-index:1;
}
#detail div span {
color:#ffffff;
position:absolute;
bottom:0;
text-align:center;
width:100%;
background: #000000;
opacity: .8;
z-index:2;
}
#links img {
width:30px;
height:30px;
margin-left:16px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.js">
var container = $('#detail');
container.find('div:first-child').fadeIn("slow");
$('a').click(function () {
var active = $(container.find('div')[$(this).prevAll('a').length]);
active.siblings().hide();
active.fadeIn("slow");
});
</script>
</head>
<body>
<div id="detail">
<div id="div1" style="display:none">
<span>CONTENT 1</span>
<img src="images/1.jpg"/>
</div>
<div id="div2" style="display:none;">
<span>CONTENT 2</span>
<img src="images/2.jpg" />
</div>
<div id="div3" style="display:none">
<span>CONTENT 3</span>
<img src="images/3.jpg" />
</div>
<div id="div4" style="display:none">
<span>CONTENT 4</span>
<img src="images/4.jpg" />
</div>
</div>
<div id="links">
<a href="#" name="div1" ><img src="images/1.jpg" /></a>
<a href="#" name="div2" ><img src="images/2.jpg" /></a>
<a href="#" name="div3" ><img src="images/3.jpg" /></a>
<a href="#" name="div4" ><img src="images/4.jpg" /></a>
</div>
</body>
</html>

I'd try to keep it simple:
<img id="image"/>
<button class="image-url" href="http://www.placehold.it/350x350/FFF">IMG 1</button>
<button class="image-url" href="http://www.placehold.it/350x350/EEE">IMG 1</button>
<button class="image-url" href="http://www.placehold.it/350x350/GGG">IMG 1</button>
<button class="image-url" href="http://www.placehold.it/350x350/DDD">IMG 1</button>
$('.image-url').on 'click', (ev)->
# Edit: the fade effect
$('#image').fadeOut('slow')
$('#image').attr('src', $(this).attr('href'))​
$('#image').fadeIn('slow')
FIDDLE

displaying a hidden div with a scroll down effect using jquery on hover

I would like to create a feature so when the user hovers over the LI, a div crawls down using jquery easing.
JsFiddle: http://jsfiddle.net/WZvPk/2/
This is what i have so far:
HTML
<div class="sectorWrapper">
<ul class="sectors">
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors/introtosectors/examplesectorpage.aspx" target="_self">
<div class="sectorTitle">
Sector 1
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" style="width: 193px; height: 88px;" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 2
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div></div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 3
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 4
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 5
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 6
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 7
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
</div>
</div>
</li>
<li>
<div class="sectorGrid">
<div class="sectorTextWrapper">
<a href="/en-us/sectors.aspx" target="_blank">
<div class="sectorTitle">
Sector 8
</div>
</a>
</div>
<div class="sectorImage">
<img alt="" width="193" height="88" src="http://i40.tinypic.com/34dpi8o.jpg" />
<div style="margin-top:-30px; display:none;" class="showme">View project</div>
<br />
</div>
</div>
</li>
</ul>
</div>
CSS:
/*force the image size to be set by css*/
div.sectorImage a img
{
width:193px;
height:88px;
}
div.showMe
{
display:block;
}
.sectorGrid
{
position:relative;
}
jquery
$("ul.sectors li").hover(
function () {
$("div.sectorImage div.showme").css("display", "block");
},
function () {
$("div.sectorImage div.showme").css("display", "none");
}
);
The idea is when the user hovers over the section it will slowely drop the hidden div at the bottom allowing them to click the "view project" link.
I am having problems making this work with just one LI, if you test the jsfiddle you can see display:block seems to work but for all the LI, which is wrong.
Could you help me now that ive explained better?

If you change this
$("div.sectorImage div.showme").css("display", "block");
to this
$(this).children(".sectorImage").children(".showme").css("display", "block");
you'll be showing only one div