|
CSS - Translucent Div On Top Of Image When On Hover?
Hi there,
I am looking for a way to display a 'translucent' layer on top of an image when hovered on. Is this possible? I guess I can do it with a PNG, but this onl;y works in IE right? Any ideas? Similar TutorialsI am attempting to build an online community, using phpBB 2.0.10 as its core. Two of the problems I have been running into seems as if I should be able to handle them easily, but they have been driving me up the wall. [Part I]Fixed Background Images (non-CSS) I was looking for a way to include a large background image and not have it be repeated; I finally found (just a few days ago) a script that would cause the text, tables, images, and other page elements to scroll over a fixed background image. So it seems that problem has been solved, although I submit it for your critique because I have met mixed responses to the first code Code: <body bgproperties="fixed"> which I was told only works on IE. I then stumbled across a second: Code: <style>
body {background-attachment:fixed}
</style>
The above code is supposed to support Netscape/Mozilla browsers as well. [Part Two]Table Transparency (possible CSS???) This is simple; I am looking for a means to adjust the alpha of my tables to give them a translucent appearance. This cannot be faked due to the fixed background and scrolling page elements! I can't seem to find any documentation on the subject. But I need a partial transparency on my tables so that the background image is somewhat visible through them as they scroll. Once again my developement is stalled with the interactions of my website with the multitude of browsers... Firebird... displays perfectly everytime without a doubt... I'm beginning to wonder why I even bother looking testing it in that browser becuase nothing is ever wrong. Internet Explorer, on the other hand, is a different beast entirely. Basically I'm trying to set up a div element that uses a semi opaque background... something between 75-85%, such that the background of my website shows through. So what I decided to do was make a graphic ( in Interlaced PNG format ) that would match my needs. As mentioned above there are some display issues in IE. I was wondering if there is a way to control the alpha level of element backgrounds without setting up/or using graphics, ( the less bandwidth the better ). Regards, ok i tried using this script to make a background on my site translucent, the problem is that it only works in firefox, not also in IE like its stated, any ideas? Hi Guys, I am having trouble working out how to line up the hover background image with the background image for a mouseover effect. It is currently putting the hover BG image ''x.gif' over the text instead of in the same position as 'bullet.gif' HTML ---------- <div id="vertmenu"> <ul> <li><a href="#" tabindex="1">Home</a></li> <li><a href="#" tabindex="2">About Us</a></li> <li><a href="#" tabindex="3">Computing</a></li> <li><a href="#" tabindex="4">Web Sites</a></li> <li><a href="#" tabindex="5">Games</a></li> <li><a href="#" tabindex="6">Links</a></li> </ul> </div> CSS ---------- PHP Code: #navcontainer ul { list-style-type: none; text-align: left; } #navcontainer ul li a { background: transparent url(images/bullet.gif) left center no-repeat; padding-left: 15px; text-align: left; font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:14px; color:#33CC00; font-weight:bold; text-decoration: none; color: #999; border-bottom: 1px dashed #FF9933; } #navcontainer ul li a:hover { background: transparent url(images/x.gif) left center no-repeat; color: black; border-bottom: 1px dashed #FF9933; } #navcontainer ul li a#current { background: transparent url(images/x.gif) left center no-repeat; color: #666; border-bottom: 1px dashed #FF9933; } Code: #middleschool-image {
position:absolute;
left:498px;
top:389px;
width:274px;
height:86px;
}
.middleschool-image a:hover img {
background-image: url(images/mid_school_ovr.jpg);
}
Am I missing something? When I mouse-over nothing happens... I am wanting to add an hover option to my pictures and can not get it to work. I have each picture in a box div and was wondering how to add an hover to it. The link to the website is:-brushing with greatness. I just want the whole box to light up when you hover over the image. Would i have to use javascript or can i do this completely with css? Many thanks in advance. I have seen it once but cannot find it. What I am looking for is a script or stylesheet code that when the mouse is over an image that is a link, a large size of that image will appear as a popup and disappear when mouse is removed, how do I do it or when can I find it. Thanks Tim Hi, I have a menu of made of images, each one is a link to a certain page. I want to replace the current image with a new slightly different image when the user hovers on it. I have 5 menu items so 10 images. My question is, can I do this in CSS without having to make a CSS rule for each image? Thanks in advance I'd better admit right off the bat that I'm a total moron at this stuff. Here's the site I'm working on (I apologize for the geocities ads - I don't want to buy hosting until I'm ready to roll with the page). http://www.geocities.com/dbot69/page1.html It does pretty much exactly what I want it to do through firefox, but it's all messed up on internet explorer. Is there any way I can get it to be compatible? I got the css code from this website (it's down but here's the google cache link): http://66.102.7.104/search?q=cache:na1aQDyoijkJ:www.frankmanno.com/ideas/css-imagemap/+CSS+Image+Maps+-+Flickr-like+Technique&hl=en&client=firefox-a then I tailored the code to do what I'm trying to do. But I'm probobly just doing it stupidly seeing as I have no clue what I'm doing. I got the following error when i tried to validate my code: "Line: 21 Parse error - Unrecognized " (it said other stuff, but it wouldn't let me make the post with that other stuff included) I don't really know what that error means though or how to fix it Any help anyone could give me would be greatly appreciated! Thanks! Rob Hello, I am trying to get two image links (that look like tabs) to get to work on my web page. What I want to have is a tab that when a user hovers over it, the background image appears (just a different version of the original image). So my HTML is: Code:
<table>
<tr>
<td><a class="flights"><img src="/images/buttons/f.gif"></a></td>
<td><a class="vacations"><img src="/images/buttons/v.gif"></a></td>
</tr>
<table />
and my CSS is: Code:
.flights {
background:url(/images/buttons/f_h.gif) center top no-repeat;
width: 78px;
height: 41px;
/* background-image: url(/images/buttons/f_h.gif); */
margin-right: 1px;
}
.flights:hover img {
visibility: hidden;
}
.vacations {
/* background:url(/images/buttons/v_h.gif) top left no-repeat; */
background-image: url(/images/buttons/v_h.gif);
}
For some reason in FF (have not tested in IE) the background image sticks out a little at the bottom even though both images used are exactly the same size. Then when I hover over the tab, its background image appears but it is about halfway down from the foreground image. Any insights as to why this might be happening? I want a background image on an element that is a specific size where the background changes when hovered and the element functions as a link. I don't want text for the link to be visible. I tried doing this as an a tag but the background is only visible for the height of the text unless I make the text huge and then make it transparent and that doesn't work in IE as the text is still visible I want it to be a specific width and height. It is on the opposite side of a nav bar from my main nav that is a horizontal list so I want is to retail the size of my nav. I don't want the background to be two different images for plain and hover so I was using background placement and moving the bg image on hover. I thought I could then do this as a single li but I have not had success. What is the simplest way to achieve this? I would like to keep the text somehow for accessibility but not have it visible. That's what a friend of mine is trying to do to her blog. She's been trying for the longest time to get the hover command to change some link text color into a gif image, but all she can manage is the background behind the text. If you don't get what I'm trying to say, this is a screen cap of what she has right now: img801.imageshack.us/i/screencap.png/ Basically, she want's to know if there's a way so that, rather than having the gif around her text, it would display inside of her text only so that the words would look like static. If anyone knows if this is even possible, please help me out. Thanks in advance. Hi, I have a link and an image next to each other. I want to make the link hovered when I do mouseover on image. How do I do that ? Here is the code I have now. <a href="javascript:undefined" id="imageLinkId">GMNA</a> <script language="javascript"> if( ... ) { document.write('<img src="/graphics/channel/plus.png" id="div18Img" alt="Maximize this section" onMouseOver= >'); } else { document.write('<img src="/graphics/channel/minus.png" id="div18Img" alt="Minimize this section" onMouseOver= >'); } </script> Thanks I'm still relatively new to this whole homepage thing. I was wondering if its possible using only CSS to make this happen: i have a bunch of headings along the top of a page that a person can click on. Below is a box with an image. I would like a different image to appear in that box when a differnt heading above is hovered over. Is this javascript stuff ?:S (havnt started learning that yet) tanks, matt. Hi- Please view this page in both FF and IE: http://www.highpeakssoftware.com/test/home.html when hovering over the links on the left, a small arrow should appear next to each one. I am acheiving this by specifying each <a>'s background-image as the arrow with a left position of -16px (which places it outside the border, so it's invisible), then making it visible by changing it's left position to 0 when it is hovered over. you can search for the following declaration in the css: Code: div#subnav ul li a:hover or line 164 to see the code however, in IE, it seems to be reloading the image on every hover (you can see the delayed response, as well as the hourglass very briefly on hover) This is extremely annoying anyone know of any ways around this bug? Am trying to solve an annoying IE problem: I have a menu which I has a background image which should appear when rolled over. Unfortunatly this works on Firefox but not IE. In internet explorer, nothing changes when the menu item is rolled over ( hovered ) .. any ideas? The code is: Code: #item, #item2, #item3, #item4 {
height:24px;
width:147px;
border:1px solid #dddddd;
padding-top:14px;
padding-left:15px;
}
#item:hover, #item2:hover, #item3:hover, #item4:hover { color:white; }
#item:hover { background-image:url(homeRollover.png); }
#item2:hover { background-image:url(aboutusRollover.png); }
#item3:hover { background-image:url(servicesRoll.png); }
#item4:hover { background-image:url(contactusRoll.png); }
I am using a CSS hover image enlarge which when you hover over a thumbnail, it then shows the large version. It works fine in IE7 onwards, but in IE6 the enlarged image is now showing at all when you hover over the thumbnail. Can anyone help? here is the HTML Code: <div id="side-b"> <div class="news-box-container"> <div class="sidebar"><img src="includes/side2barsmall.jpg" alt="" /></div> <div class="news-box"> <div class="staffpics"> <a class="p1" href="#" title=""><img src="includes/staffone.jpg" title="" alt="" /> <img class="large" src="includes/staffonelarge.jpg" title="" alt="" /></a> </div><!-- end staffpics --> </div><!-- end news-box --> <div class="sidebar"><img src="includes/side2barsmall.jpg" alt="" /></div> </div><!-- end news-box-container --> </div><!-- end side b --> here is the CSS Code: .staffpics {
width:96px;
}
.staffpics a.p1, a.p1:visited {
width:96px; height:78px; border:0px none;
}
.staffpics a img {
border:0px none;
}
.staffpics a.p1:hover {
color:#000;
}
.staffpics a .large {
position:absolute; width:0; height:0; border:0px none; top:0; left:0; padding:0px
}
.staffpics a.p1:hover .large {
position:absolute; top:125px; left:400px; width:300px; height:243px; border:10px solid #FABA32; padding:0px;
}
i know this is probably a really simple question but i cant think straight and why i cant work it out. when the person hovers over this image i want it to display a border or a certain colour. Code: #buildings
{
height:195px;
width:280px;
float:left;
margin-left:155px;
margin-top:45px;
}
thats my css i have for this image: Code: <div id="buildings"> <a href="Buildings.php"> <img src="Menu_Images/Buildings.png" width="280" height="195" alt="Buildings" /></a> </div> what would i need to do do ive tried a hover: but that didnt seem to work I have an image gallery, that when the thumbnail is hovered over a larger image appears. This works fine in Firefox and IE but not in Safari. I have validated my code and css. The gallery is at http://www.briandobson.com.au/sthaust.html Code:
<tr>
<td valign="top">Boat Harbour, Goolwa<br />
75 x 35cm <br />
$720</td>
<td valign="top"> </td>
<td>
<a class="thumbnail" href="#"><img src="SthAust/thumbs/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="200" height="46" />
<span>
<img src="SthAust/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="775" height="248" />
</span>
</a>
</td>
</tr>
CSS is in the head and separate styles.css Code: .thumbnail img {
border: 1px solid white;
}
.thumbnail:hover {
background-color: transparent;
float: left;
}
.thumbnail:hover img {
border: 1px solid white;
}
.thumbnail span {
position: absolute;
background-color: white;
padding: 1px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
display: block;
}
.thumbnail span img {
border-width: 1px;
}
.thumbnail:hover span {
visibility: visible;
background: top;
left: 0px;
z-index: 50;
}
With thanks Angela Hi everyone, I was wondering what I would have to do to get an image to be above an in-line horizontal menu when it is is hovered upon. Here is my css so far, right now on hover I have it changing color with text-shadow. I would like to keep that along with the image above. I have seen some tutorials using about using spans but nothing worked. Thanks in advance! Code: .nav ul{list-style-type:none; margin:0 auto; padding:0; width:600px; height:50px; padding-left:500px; padding-top:100px} .nav li {display:inline; padding-right:15px } .nav a {text-decoration:none; color:white;} .nav a:hover {color: #0C0; text-shadow:2px 2px 2px white;}
|
|||||||