Hi There,
I've come across this interesting web page - to see what I'm talking about, just hover over each image:
http://poptech.org/speakers?utm_sour...m_medium=email
Could this sort of thing be accomplished fairly easily with an existing javascript library/script? A jquery script would be ideal if such a thing exists.
Thanks,
Dan
It's quite simple with JQuery.
The boring part is to make the css.
Check this simple example:
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
//document ready
$(function()
{
$(".item").hover(function()
{
$(this).css("z-index", 999); // Set item to be on top of everybody else
$(this).children(".label").slideUp(); // Hide label on mouse over
$(this).children(".description").slideDown(); // Show description on mouse over
},
function()
{
$(this).css("z-index", 10); // Restore z-index
$(this).children(".label").slideDown(); // Show label on mouse out
$(this).children(".description").slideUp(); // Hide description on mouse out
});
});
</script>
<style text="text/css">
.item
{
width: 200px;
height: 200px;
position: relative;
}
.item .image
{
position: absolute; top: 0; left: 0;
z-index: 10;
}
.item .label
{
position: absolute; bottom: 0; left: 0;
width: 200px;
height: 30px;
background: #800;
color: #fff;
z-index: 20;
}
.item .description
{
position: absolute; top: 0; right: -200px;
width: 200px;
height: 200px;
background: #008;
color: #fff;
display: none;
z-index: 30;
}
</style>
<body>
<div id="itens">
<span class="item">
<img class="image" src="http://cjsmedium.web.officelive.com/images/pink-floyd-backs-5000178.jpg" width="200" height="200" />
<span class="label">label here</span>
<span class="description">
hdusauhd suahdhusa uhuhdsa uhdusahd huashud ashudu hauhdu hashud huauhd huashud aushduh auhduhasuh daushuhd auhsuhd auhduhasudhasuh
</span>
</span>
<span class="item">
<img class="image" src="http://i871.photobucket.com/albums/ab278/CrimsonBlade7/Dark_Side_of_the_Moon_by_megamanexe.png" width="200" height="200" />
<span class="label">label here</span>
<span class="description">
hdusauhd suahdhusa uhuhdsa uhdusahd huashud ashudu hauhdu hashud huauhd huashud aushduh auhduhasuh daushuhd auhsuhd auhduhasudhasuh
</span>
</span>
<span class="item">
<img class="image" src="http://www.wallpaperbase.com/wallpapers/music/pinkfloyd/pink_floyd_8.jpg" width="200" height="200" />
<span class="label">label here</span>
<span class="description">
hdusauhd suahdhusa uhuhdsa uhdusahd huashud ashudu hauhdu hashud huauhd huashud aushduh auhduhasuh daushuhd auhsuhd auhduhasudhasuh
</span>
</span>
<span class="item">
<img class="image" src="http://www.progarchives.com/progressive_rock_discography_covers/364/cover_20612192009.jpg" width="200" height="200" />
<span class="label">label here</span>
<span class="description">
hdusauhd suahdhusa uhuhdsa uhdusahd huashud ashudu hauhdu hashud huauhd huashud aushduh auhduhasuh daushuhd auhsuhd auhduhasudhasuh
</span>
</span>
</div>
</body>
</html>Hope it helps.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.
