showing a hint message upon hovering
i followed a tutorial on how to make a photo gallery using jquery plugins
and html and im trying to make some amendments to it,normally when i click
on an image it zooms out but i want to add a hint such that when i click
on the image it shows a certain hint message for example if i click on an
image it shows a hint this is message number 1,below is the normal code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Pure CSS3 photo gallery | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container" id="container">
<div class="gallery">
<a tabindex="1"><img src="images/1.jpg"> </a>
<a tabindex="1"><img src="images/2.jpg"></a>
<span class="close"></span>
</div>
</div>
</body>
</html>
but i want to add something like this
<a tabindex="1"><img src="images/1.jpg"> <p class="hint">image 43 </p></a>
and in the css i add something like this
.gallery:hover .hint{
margin:-30px 0 0 450px;
}
im not very good but i would love to learn this,thanks in advance
No comments:
Post a Comment