Gallery slide show ,motion pictures are not moving - javascript

I am try to build Gallery slide show.
I am new in javscript and jQuery.
1 - I don't see any mottion moving and I don't no why?
2 - I can not center the image center of the div, the left side there is linkage.
Thanks for any help and guidance on the subject.
Here we can see code that work good.
Gallery
My code HTML file:
<html>
<head>
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" language = "Javascript">
<!-- Hide from older browsers;
window.onload = function(){
$('#scroll_me').click(function() {
var item_width = $('#portfolio-tiles li').outerWidth() + 30;
var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width;
$('#portfolio-tiles:not(:animated)').animate({
'left': left_indent
}, 500, function() {
$('#portfolio-tiles li:last').after($('#portfolio-tiles li:first'));
$('#portfolio-tiles').css({
'left': '-300px'
});});
});
};
// end hide -->
</script>
</head>
<body>
<div id="container">
<div id='carousel_inner'>
<ul id="portfolio-tiles">
<li>
<a id="example2" href="p1.png">
<img alt="item1" src="p1.png">
</a>
</li>
<li>
<a id="example2" href="p2.png">
<img alt="item2" src="p2.png">
</a>
</li>
<li>
<a id="example2" href="p3.png">
<img alt="item3" src="p3.png">
</a>
</li>
<li>
<a id="example2" href="p5.png">
<img alt="item4" src="p5.png">
</a>
</li>
</ul>
</div>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div><h2>Click here</h2><img id="scroll_me" alt="item1" src="p4.png"></div>
</body>
</html>
My code CSS file:
#carousel_inner{
background-color: #60F0F0;
background-position: left top;
position:relative;
list-style-type: none;
float: left;
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
height: 215px;
width: 980px;
overflow: hidden;
border:1px;
border-style:solid;
border-color:yellow;
}
#portfolio-tiles li img {
cursor:pointer;
cursor: hand;
border:1px;
border-style:solid;
border-color:red;
}
#portfolio-tiles li {
display: block;
float: left;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 284px;
border:1px;
border-style:solid;
border-color:green;
}
#portfolio-tiles {
position:relative;
left:-316px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 10px 0px 0px 10px;
width:9999px; /* important */
}
img {
width: 277px;
}
#scroll_me{
float: left;
display: block;
margin: 0px;
}
h2 {
float: left;
position: relative;
top: 20px;
left: 0;
width: 100%;
}


when you do the animate, you are applying CSS styles to the properties. therefore, in the case of positioning, you have to indicate the units, like:
$('#portfolio-tiles:not(:animated)').animate({
'left': left_indent + 'px'
}...

Related

How to set relative position of tooltip in CSS/JS?

I know there are lots of similar questions but I can't get it to work and hope you can help me.
I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.
The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.
Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.
function CopyToClipboard(id) {
// do copy stuff here
// [...]
// showing tooltip
var span_element = document.getElementById(id).parentElement.querySelector('span');
if(span_element != null) {
span_element.style.display = "inline";
setTimeout( function() {
span_element.style.display = "none";
}, 2000);
}
}
body {
margin-left: 0px;
}
ul {
padding-left: 20px;
}
div.container {
margin: 10px;
width: 98%;
word-break: break-all;
}
.custom-tooltip {
padding: 4px;
background-color: grey;
color: #fff;
position: relative;
bottom: 2em;
right: 5em;
display: none;
}
<html lang="de" class=" heujtnrdy idc0_345">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.90">
<link rel="stylesheet" href="index_tmp.css">
<script type="text/javascript" src="index_tmp.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<span>Layer 1</span>
<ul>
<li>
<span>Layer 2</span>
<ul>
<li>
<span>Layer 3</span>
<ul>
<li>
<div>
<table>
<tr>
<td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-- Update 05.02.2023 --
Here my modified CSS, based on granite's alternative solution. This looks like this:
.modal {
display: none;
position: fixed;
padding-top: 50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
text-align: center;
justify-content: center;
}
.modal-content {
background-color: grey;
border: 0.5px solid grey;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.0em;
font-family: monospace;
font-weight: 700;
bottom: 1em !important;
position: fixed;
}

As a secondary option (via modal):
Html: 2 lines code.
CSS: 7 extra lines code.
JS: 10 extra lines code.
Just need to get the JS CopyToClipboard to link up.
<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>
.modal {
display: none;
position: fixed;
padding-top: 25%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #eff;
text-align:center;
margin: 0 auto;
padding: 3px;
width:4em;
}
var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
modal.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

Make image appear when hovering and dissapear when not

I have a div that I want an image to appear when it is hovered on and disappear when moved to another div (which will show another image instead). I tried to set it to display: none from the css file and show it again in jQuery with display: normal, but it feels wrong and apparently is wrong too, any suggestions on how to make it work?
const imgOne = () => {
$("#img1").css('display', 'normal')
}
$(document).ready(function () {
$(".class4").hover(function() {
$('#banner').css('background', '#3a50d9')
$(".hero-name div").css('color', '#ffffff')
$("#banner h2").css("font-family", 'Codystar, cursive')
$('#banner h2').css('font-size', '6vmin')
$("#banner h2").css("font-weight", "700")
$(".hero-name div").css('text-shadow', '-4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27')
})
$(".class5").hover(function() {
$('#banner').css('background', '#005dff')
$(".hero-name div").css('color', '#ffffff')
$("#banner h2").css("font-size", '4vmin')
$("#banner h2").css("font-family", '\"Press Start 2P\", cursive')
$(".hero-name div").css('text-shadow', '-5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd')
// Images
imgOne()
})
}
#img1 {
position: absolute;
left: 41%;
bottom: 60%;
display: none;
}
<!-- Banner Section -->
<section id="banner">
<img id ="img1" src="resources/frozen.svg" alt="pacman" type="png">
<div class="hero-name">
<div class="class1">Y</div>
<div class="class2">O</div>
<div class="class3">U</div>
<div class="class4">R</div>
<div class="class5"></div>
<div class="class6">N</div>
<div class="class7">A</div>
<div class="class8">M</div>
<div class="class9">E</div>
<div class="hero-pro">
<h2>Title Here</h2>
</div>
</div>
An example to clarify: If I hover over the letter "N", an image would appear. When I move to hover to the letter "A", another image would appear and the image that appeared from "N" would disappear.

Im a bit confused at exactly what you want. This may be a case where using :not in CSS will do what you want though. So if I had several images and only wanted the hovered image to be visible I would add
img {
position: absolute;
left: 50%;
top: 20px;
width: 100px;
height: 100px;
opacity: 0;
transition: opacity 0.5s;
}
#backdrop {
position: absolute;
top:0;
width:0;
height: 250px;
z-index:-1;
transition: width .5s;
}
.letters {
width: min-content;
}
h2 {
position: relative;
left: 20px;
}
/*class1 hover effects*/
.class1:hover ~ #img1{
opacity: 1;
}
.class1:hover ~ #backdrop{
width: 100%;
background: #3a50d9;
}
.class1:hover ~ .hero-pro h2, .hero{
font-family: 'Codystar', cursive;
font-size: 30pt;
font-weight: 700;
text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}
/*class2 hover effects*/
.class2:hover ~ #img2{
opacity: 1;
}
.class2:hover ~ #backdrop{
width: 100%;
background: #005dff;
}
.class2:hover ~ .hero-pro h2, .hero{
font-family: 'Press Start 2P', cursive;
font-size: 30pt;
font-weight: 700;
text-shadow: -5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd;
}
/*class3 hover effects*/
.class3:hover ~ #img3{
opacity: 1;
}
.class3:hover ~ #backdrop{
width: 100%;
background: yellow;
}
.class3:hover ~ .hero-pro h2, .hero{
font-family: 'Press Start 2P', cursive;
font-size: 30pt;
font-weight: 700;
text-shadow: -5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Codystar&display=swap" rel="stylesheet">
<!-- Banner Section -->
<section id="banner">
<div class="hero-name">
<div class="class1 letters">Y</div>
<div class="class2 letters">O</div>
<div class="class3 letters">U</div>
<div class="class4 letters">R</div>
<div class="class5 letters"></div>
<div class="class6 letters">N</div>
<div class="class7 letters">A</div>
<div class="class8 letters">M</div>
<div class="class9 letters">E</div>
<div id="backdrop"></div>
<div class="hero-pro">
<h2>Title Here</h2>
</div>
<img id ="img1" src="https://www.pinclipart.com/picdir/middle/84-849138_gold-chain-gangster-clipart.png" alt="sonic"/>
<img id ="img2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Pac_Man.svg/1200px-Pac_Man.svg.png" alt="pacman"/>
<img id ="img3" src="https://www.clipartmax.com/png/middle/27-279319_donkey-kong-png-photo-donkey-kong-king-of-swing.png" alt="dk"/>
<img id ="img4" src="https://www.vhv.rs/dpng/d/574-5744697_tails-sonic-and-all-stars-racing-transformed-tails.png" alt="tails"/>
</div>

Use opacity so your image retains its dimensions.
#img1 {
position: absolute;
left: 41%;
bottom: 60%;
opacity: 0;
}
#img1:hover {
opacity: 1;
}
<!-- Banner Section -->
<section id="banner">
<img id="img1" src="https://placekitten.com/200/300" alt="pacman" type="png">
<div class="hero-name">
<div class="class1">Y</div>
<div class="class2">O</div>
<div class="class3">U</div>
<div class="class4">R</div>
<div class="class5"></div>
<div class="class6">N</div>
<div class="class7">A</div>
<div class="class8">M</div>
<div class="class9">E</div>
<div class="hero-pro">
<h2>Title Here</h2>
</div>
</div>
</section>

Why are my links at different heights?

I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.

Coin-Slider does not display buttons correctly (except in Chrome)

Not sure why this is occurring, if I go to the coin-slider page in IE or Firefox the JavaScript works, but once I apply it to my local build for a site it displays the buttons as numbers and doesn't show the background box for the slider titles.
It works perfectly in Google Chrome though. I've triple checked my html and css and it looks correct, any ideas?
How it appears in Chrome, and how it appears in IE/Firefox (Hovering over what should be the circles in the second image).
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" type="type/css" href="coin-slider-styles.css">
</head>
<body>
<div id="container">
<div id="coin-slider">
<a href="group.html">
<img src="img/sliderGroup.jpg">
<span>
heading1
</span>
</a>
<a href="plan.html">
<img src="img/sliderPlan.jpg">
<span>
heading2
</span>
</a>
<a href="num.html" >
<img src="img/sliderNum.jpg">
<span>
heading3
</span>
</a>
<a href="exp.html" >
<img src="img/sliderExp.jpg">
<span>
heading4
</span>
</a>
<a href="rep.html">
<img src="img/sliderRep.jpg">
<span>
heading5
</span>
</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({width:800, height:300, spw: 12, sph: 5, sDelay: 1, delay: 6000, opacity:0.95, hoverPause: true, links: true, effect: 'rain' , titleSpeed: 500});
});
</script>
</body>
.coin-slider {
overflow: hidden;
zoom: 1;
position: relative;
}
.coin-slider a{
text-decoration: none;
outline: none;
border: none;
}
.cs-buttons {
font-size: 0px;
padding: 10px;
float: left;
}
.cs-buttons a {
margin-left: 5px;
height: 10px;
width: 10px;
float: left;
border: 1px solid #B8C4CF;
border-radius: 100%;
color: #B8C4CF;
text-indent: -1000px;
}
.cs-active {
background-color: #454545;
color: #FFFFFF;
}
.cs-title {
width: 780px;
padding: 10px;
background-color: #454545;
color: #FFFFFF;
font-size: 13px;
}
.cs-prev, .cs-next {
background-color: #454545;
color: #FFFFFF;
padding: 0 10px 0 0;
}

here it is working fine in
http://jsfiddle.net/sarath704/cgU9R/
check once where you get problem
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
$('#coin-slider').coinslider({width:800, height:300, spw: 12, sph: 5, sDelay: 1, delay: 6000, opacity:0.95, hoverPause: true, links: true, effect: 'rain' , titleSpeed: 500});
});
</script>
<style>
.coin-slider {
overflow: hidden;
zoom: 1;
position: relative;
}
.coin-slider a{
text-decoration: none;
outline: none;
border: none;
}
.cs-buttons {
font-size: 0px;
padding: 10px;
float: left;
}
.cs-buttons a {
margin-left: 5px;
height: 10px;
width: 10px;
float: left;
border: 1px solid #B8C4CF;
border-radius: 100%;
color: #B8C4CF;
text-indent: -1000px;
}
.cs-active {
background-color: #454545;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="coin-slider">
<a href="group.html">
<img src="http://workshop.rs/projects/coin-slider/games/mini_ninjas.jpg" alt="Mini Ninjas" />
<span>
heading1
</span>
</a>
<a href="plan.html">
<img src="http://workshop.rs/projects/coin-slider/games/prince_of_persia.jpg" alt="Price of Persia" />
<span>
heading2
</span>
</a>
<a href="num.html" >
<img src="http://workshop.rs/projects/coin-slider/games/spiderman_shattered_dimensions.jpg" alt="Spiderman: Shattered Dimensions" />
<span>
heading3
</span>
</a>
<a href="exp.html" >
<img src="http://workshop.rs/projects/coin-slider/games/brink.jpg" alt="Brink" />
<span>
heading4
</span>
</a>
<a href="rep.html">
<img src="http://workshop.rs/projects/coin-slider/games/borderlands.jpg" alt="Borderlands" />
<span>
heading5
</span>
</a>
</div>
</div>
</body>
</html>

photo gallery with description

I'm trying to build an image gallery with description when moving over the image.
The code looks good but nothing happens when you move the mouse cursor over the image.
My problem is when I running the code the "<div class='description_content'>" does not appear.
Thx for any help.
good examle
wrong code
HTML CODE:
<html>
<head>
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" language = "Javascript">
<!-- Hide from older browsers;
window.onload = function(){
$('#scroll_me').click(function() {
var item_width = $('#portfolio-tiles li').outerWidth() + 2.5;
var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width;
$('#portfolio-tiles').animate({
'left': left_indent
}, 500, function() {
$('#portfolio-tiles li:last').after($('#portfolio-tiles li:first'));
$('#portfolio-tiles').css({
'left': '-302'+'px'
});});
});
//********************************************** div.description
//for each description div...
$('div.description').each(function(){
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'block');
});
$('#portfolio-tiles li').hover(function(){
//when mouse hover over the wrapper div
//get it's children elements with class description
//and show it using fadeTo
$(this).children('.description').stop().fadeTo(500, 0.4);
},function(){
//when mouse out of the wrapper div
//use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});
};<!-- End onload;
// end hide -->t = setInterval( function(){ $('#next').trigger('click'), 2000 } );
//$('#stop').click( function(){
//clearInterval(t);
</script>
</head>
<body>
<div id="container">
<div id='carousel_inner'>
<ul id="portfolio-tiles">
<li>
<a id="example2" href="p1.png">
<img alt="item1" src="p1.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p2.png">
<img alt="item1" src="p2.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p3.png">
<img alt="item1" src="p3.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p5.png">
<img alt="item1" src="p5.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
</ul>
</div>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div><h2>Click here</h2><img id="scroll_me" alt="item1" src="p4.png"></div>
</body>
</html>
CSS CODE:
#carousel_inner{
background-color: #60F0F0;
background-position: left top;
position:relative;
list-style-type: none;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 220px;
width: 652px;
overflow: hidden;
border:1px;
border-style:solid;
border-color:yellow;
}
#portfolio-tiles li img {
cursor:pointer;
cursor: hand;
border:1px;
border-style:solid;
border-color:red;
}
#portfolio-tiles li {
position:relative;
display: block;
float: left;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 2.5px 0px 2.5px;
width: 309px;
border:1px;
border-style:solid;
border-color:green;
}
#portfolio-tiles {
position:relative;
left:-302px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 15px 15px 15px 15px;
width:9999px; /* important */
}
img {
width: 277px;
}
#scroll_me{
float: left;
display: block;
margin: 0px;
}
h2 {
float: left;
position: relative;
top: 20px;
left: 0;
width: 100%;
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
display:none; /* hide it */
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
}
div.description_content{
padding:10px;
}

You can use $('li').hover() and $(this).find('.description') to achieve this.
Replace this piece of code...
$('#portfolio-tiles li').hover(function(){
$(this).children('.description').stop().fadeTo(500, 0.4);
},function(){
$(this).children('.description').stop().fadeTo(500, 0);
});
with this...
$('li').hover(function(){
$(this).find('.description').stop().fadeTo(500, 0.4);
},function(){
$(this).find('.description').stop().fadeTo(500, 0);
});

Categories

Resources