View Full Version : Thumbnail Image jumping
n1kk1
01-27-2009, 05:02 PM
Hello, I have only learnt HTML and CSS this week and am having great fun with it. I am having a problem however with a linked image, i have entered a code into my stylesheet to enlarge the HTML thumbnail image, this has worked fine apart from the image jumps whenever I hover a cursor over.
Any help would be appreciated
Thanks
n1kk1
01-27-2009, 05:04 PM
also, the text under the pop-up image is wrapping under each other for some reason, do you know how I can stop this so it appears on 1 line
This is the code in my HTML
<a class="thumbnail" href="#thumb"><img src="Landscape 1.jpg" style="position:absolute;bottom:470px;right:220px; width="250px" height="140px" border="0" /><span><img src="Landscape 1.jpg" /><br />Stuart McAlpine Miller.</span></a>
And this is what is in my CSS
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: rgb(8,8,8);
padding: 2px;
left: 6000px;
border: 1px dashed gray;
visibility: hidden;
color: white;
text-decoration: none;
font-size: 8pt;
font-family: Bradley Hand ITC;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 5;
left: 500px; /*position where enlarged image should offset horizontally */
}
</style>
Medyman
01-27-2009, 07:01 PM
Please post a link to the page on your site that contains the problematic script so we can check it out.
n1kk1
01-28-2009, 08:58 AM
Hi, I haven't uploaded it as yet, I have attached the txt and css files
thanks for your help
n1kk1
01-28-2009, 11:24 AM
sorry I've just realised I need to attach the image also
n1kk1
01-28-2009, 02:20 PM
I see what is happening with this now I have set-up a style to indent all text which in turn is indenting the text on my thumbnail image - do you know how I turn of a style in a particular part of the HTML code, I have tried removing it from the head section and just adding to my paragraph section but that still applies it to all
I hope that made sense, I am new to this - please help its driving me mad!
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.