|
CSS - Css Help Needed - Hovering Image Troubles
Hi guys, Im really hoping I can get some help with this, its driving me nutty.
I am trying to code a page that has small 80 by 80 pixel images and when you rollover them I'd like a larger version of the image to appear(say 150px by 150px). I am relatively new at CSS and have been learning by playing around with it myself. Anyways, i just cant seem to get it to work. I have found code to have the rollover image show up as a different image from the original but nothing to change the sizes. One of the other issues is that I cant seem to find a way to do it without the smaller image becoming a link. I cant use Java on the site im doing this on by the way. Ive been roaming the internet looking for a way to accomplish this but havent had any luck thus far. If anyone has any idea how to go about it, or knows of a site that would, please let me know. Similar TutorialsHi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) If anyone can help me with this, I will owe my life, because I'm in over my head with a project for my electronic media class and I'm not good enough with CSS. I need to make divs appear when I hover over images. The images aren't links, just anchors. I have a long page with a ton of images, and I need divs (with tables inside) to appear when I hover over those images. Also, if possible.. I'd like the appearing divs to move relative to the browser, but if not, I'll settle for absolute. It must be so simple, but I'm waaay too stressed to get this to work. :[ Hello, I am having some problems in IE with image backgrounds. As you can see the difference in my site with IE and FF the background images are all off. This is caused by the padding I am assumming. I put a red border around the trouble spots so you could see whats going on. Any ideas? Thanks I really need help for my wordpress blog I need it to have a front page.. and i want to link images from it to the new categories... but the problem is that I want it to be like a grid and don't want all the images in the same sizes.. so here goes this is how it is.. each color is a separate picture to of the exact size.. I need them to be like how this image shows and linked too pls can someone provide me the CSS code for it ??? but the forum is not allowing to post links here it is without the brackets http://tinypic(.)com/r/32zjjpd/4 I have the navigation set so that the background turns green on the current page. When you hover over the other links they turn green. However, I do not want the active link to change colors when it is hovered over. How do I stop this from happening? http://brittanyrubinstein . com/fulcrum/index.html Hello I thought I could make it, but what I got so far is jumping over the screen, so please a need some help. I got a image with two transparant shapes. Behind those shapes I would like to show 2 other images. |-------1-------| | |-----| |----| | | |...2..| |..3..| | | |____| |____| | |_____________| Image 1 should be on top z-Index Image 2 should under image 1, a part of the image should be visible. Image 3 should under image 1, a part of the image should be visible. Now the issue, image 2 and 3 should be dynamically replaceable. Please help Thanks I am not liking CSS atm. I have spent nearly 3 hours actually on trying to get a rollover to work. I've tried a IRC channel but all the help I've gotten is how to do a image rollover with one image and/or with text. Here is all I want. It's very simple. I want to have a image rollover (the image changes when the mouse moves over it) for several different images. I want to do it in CSS. Code:
#seeallseries
{
background: url('navpictures/seeallseries.gif') no-repeat;
width: 171px;
height: 55px;
display: visible;
}
#seeallseries:hover
{
background: url('navpictures/seeallseriesHover.gif') no-repeat;
width: 171px;
height: 55px;
display: visible;
}
That's my CSS code that I have right now. How do I use that to make a image rollover. I can do Code: <div class="navbar"> <ul id="seeallseriesul"> <a href="http://www.google.com"><li id="seeallseries"></li></a> </ul> </div> Ignore the other CSS code for the moment. Right at that, it works. The image rollover happens. However I need a link which that does not provide. Is what I'm trying to do impossible? Please tell it's not. This should be simple but it's not for me. Thanks for any links or help. I really need a code. It is for a Multiple Fixed Floating Images at specific margins Fixed is very important. AKA. Scrolls with page. margins are img1 - left: 40px top: 40px img2 - left 56px top: 300px; Thank You Very Much. -Please Help! --nick11682 We recently decided to alphabetize the Specialties on our web pages (using the .php files from the Includes folder). I have re-alphabetized them in both the .php file as well as the default.css file including making the first image coincide with the alphabetized list. However, when I do, the original image (for Hospitality) remains as the default image and only changes when you finally hover over Hospitality or anything below it. Here's the way part of the original file is set up: /* Images */ div#specialties ul li a.hospitality span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/hospitality.jpg); background-repeat: no-repeat; z-index: 0; } div#specialties ul li a.hospitality:hover span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/hospitality.jpg); background-repeat: no-repeat; z-index: 0; } And here's what I changed it to: /* Images */ div#specialties ul li a.apartments span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/apartments.jpg); background-repeat: no-repeat; z-index: 0; } div#specialties ul li a.apts:hover span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/apartments.jpg); background-repeat: no-repeat; z-index: 0; } Help! You can check out the current look at Connell Insurance dot com. . A thousand apologies -- this is a very poorly worded and general question, because I've learned through scavenging and don't know the jargon, and the answer might not even lie in CSS... but the problem is really driving me to distraction. Is it possible in CSS to define a hover effect such that upon hovering over one element, a different element is affected? For example, I know you can add something like this: #example a:hover{ color: #000000; } in order to change the color of any links in the example div upon hovering. But can you change properties of links in any other divs? If so, then how? And if not, then is there a different language which can effect this change? Again, a thousand apologies for the amateurishness and outsider-wording of this question. I will be happy to clarify on request to the extent of my ability. When hovering over a link, how can I make the underline thicker? Check out this site. link I just changed my website layout from just tables to CSS but theres a few problems, nested tables dont stop at the border of the containing table they hover over them, and one of the tables that was meant to be another column moved out of the table altogether heres the site before and after i edited it: Before After I was told to divide it up like this Code: <body> <div id="wrapper"> <div id="header">Header</div> <div id="body"> <div id="nav">Nav</div> <div id="content">Content</div> </div> <div id="footer">Footer</div> </div> </body> Can anyone see what the problem is? I'm not sure if this is an HTML problem or a CSS problem, but since it seems to be a display issue, I'll start here. I have an annoying minor display issue on my site , the solution to which has alluded me for some time. The pop up menues are created using CSS specificity but I'm thinking that has no bearing on the issue because the menues aren't the only place the problem occurs. In a number of places, I have implemented mouseover effects using the :hover pseudo-(class/element). In instances where the hovered content requires more screen space (to add a border or text decoration, etc) the whole page gets shifted a pixel or two (however much it takes to add the effect). I've tried adding transparent borders around the static images and increasing line height around text, but to no avail. Any suggestions? Hi all, I am having an issue with IE7. www[dot]novakwebsales[dot]com/help/index6.html When you hover over the top category tabs, it shifts the footer up. Then if you hover over the subcategory tabs on the left it drops down again??? It works fine in Firefox... Any ideas? Thanks in advance, Tbone I am trying to create something similar to tooltips and having a problem. I know that the browsers support tooltips with the title attribute but I'm looking to do something different. Also, I know that IE has bugs with hovering on non-anchor tags but I'm trying to make this work in a standards-compliant browser (I'm not using IE). I've tried the code given by SantaKlauss and it worked fine. But why doesn't this work (a simple example to illustrate the problem)? Code:
<style type="text/css">
.test:hover + div
{
background-color: red;
}
</style>
<img class='test' src='test.gif' />
<div>here is some text</div>
If I remove the :hover pseudo-class declaration like this: Code:
.test + div
{
background-color: red;
}
It correctly sets the background color on the div following the image. So why doesn't the first example work with the hover pseudo-class?? Thanks in advance, Jeremiah I was asked by one of my friends if this was possible, and I didn't think it was but figured I'd ask here just in case... With image maps, you can have parts of an image link to different pages based on coordinates.... I wanted to know if there was a way to link to different pages based on colors on an image. Doesn't necessarily have to be done in CSS... just looking in general as to if this is possible, and what would be the best approach. Thanks. If you have a CSS menu that has drop down menu items and form elements near the top of the page, the menu disappears behind the form elements in IE 6. For an example of what I'm talking about, go he http://www.swingleandassociates.com/catalog/tindex.php?section=c.training.php Hover your mouse over CONDITIONS and you'll see that the menu disappears behind the drop down box. Does anyone know how to fix this? I tried messing with z-index but it didn't seem to work. I may not have done it right thought. Anyone got an answer for that problem? I have a Joomla! 1.5 site and I would like to make the colors of a current selection and the hovering text (when I mouse over a link) different colors. Right now they are both set to be white as governed by the following code in my template.css: .navigation .menu-drop > li:hover > a > span, .navigation .menu-drop > .active > a > span, .navigation .menu-drop > #current > a > span, .navigation .menu-drop > .sfHover > a > span { color: #FFFFFF; } What would I need to do to this to make the changes I need? Like is there a spot where I can split this code and add in another color? is there an way of changing the backround of a <tr> using CSS once the user hovers over it? |
|||||||