Basically, I want to create a button on my web page that, when the mouse hovers over it, reveals two images, one above the other. The bottom image that appears is supposed to be an animated .gif, the second is a .gif with a word ('blog', 'music', etc.) in white and a transparent background (so that the .gif behind it can still be seen). I've tried to add the words over top of the animated .gif, but its color pallet doesn't allow white (only a light grey, which is unacceptable according to the design).
I'm pretty new to html/css, so there might be a better way to do this all together.
You will want to have a with an link inside of it. The css should be as follows:
div.background_image{
background: url('path/to_your/image.gif') no-repeat 0 0;
}
a.top_image:hover{
width: Xpx;
height: Xpx;
display: block;
background:transparent url('path/to_your/image.gif') no-repeat 0 0;
}
Make the link dimensions that same size as your background image div. Should be good to go. This assumes that you want your background image div always present. The :hover is what will make the image appear on rollover
Related
I am trying to create a hover over image from a single split PNG
How do I enable it so when the image is not hovered over, the top image will view, but when they hover over, the bottom one will show.
The technique you are asking for is called "CSS-Sprites". Here's a tutorial
It uses the background-position style. For the default state of your element, just set the image as background. Note that you need a fixed height (half the height of your sprite) to hide the second part of the image. You also need a width, because your button will contain no content, just a background. For the hover state, use a negative background-position:
.button-foo{
display: block;
height: 29px;
width: 110px;
background: url("http://i.imgur.com/sJu5vvo.png") no-repeat scroll left top transparent;
}
.button-foo:hover{
background-position: 0 -29px;
}
This means the image is moved up so the top icon in there is above the visible area of your button.
Try to make sprites there is many applications out there. Google Css sprites generator.
Or try this one its free http://csssprites.com. Then its just simple css or jquery if u want any effects.
I have this situation using CSS.
I want an image to be in the center of the screen, doesn't matter the size of the screen, always in the middle. That's pretty easy to do.
But, the image (.png) I want to be in the middle is black and has some transparent letters in it.
So, I want the whole screen to be black, but still have transparent letters in the middle of the screen.
The reason I want transparent letters is because I'm using a script to fill the letters while the page is loading. The idea is based on a progress loading bar, but in this case, using letters as the 'bar'.
How can I achieve that? I have tried surrounding the image with divs but it's not the best way since depending on the screen size, some divs may not reach the image and left a blank space.
What do you suggest? What should I read?
Just in case I didn't make myself clear, here is an image:
The best option I can currently think of, to black out the screen around the centered img is to use box-shadow:
#main {
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -250px;
box-shadow: 0 0 0 500px #000;
}
JS Fiddle demo.
This does, of course, require that the browser supports the box-shadow property (or at least one of the vendor-prefixed implementations), and also takes a fairly arbitrary number for the 'spread' of the blur.
Unfortunately, while I'd rather use the border property the border affects the layout and must be compensated for in positioning the img, whereas the box-shadow doesn't affect the layout of the page.
With this demonstration, obviously, the background-color should be replaced by a background-image or whatever alternative you're using to represent the loading bar.
So you want the whole screen black, but you have transparent letters that you want to be seen?
IF i understand what you want correctly, could you make the background color of the body (or html object) black, keep the image, but put a white (or colored) image directly behind the logo using absolute positioning.
I guess I don't understand why you want the transparent letters, but a black background.
I'm looking for a bit of brainstorming assistance.
I am coding a layout that was put together by a designer and am trying to think of a way to handle a horizontal navigation that has angled edges, and goes from a blue background, to a white background when a link is selected.
I'll actually just include a screenshot. This is actually the navigation for a Tabbed content area. The top half of the screenshot shows what it will look like when the first tab is selected. The bottom half of the screenshot shows the 2nd tab selected.
http://i.stack.imgur.com/P34yI.gif
So my problem comes from the fact that HTML elements are rectangles, not rectangles with angled edges. I saved the angled edge with the shadow as a CSS background, and that worked fine, until I realized that each link can turn white and the BG image has a bit of the next link embedded in it to give the illusion of the angle, and thus the left most link would need a different background then the middle link, and the right most link, etc...
I could assign a unique class / id (or use nth child) to each link, but I would like to keep the solution flexible so I can add another link/tab in the future.
I was curious if anyone had any ideas on how to create this appearance by possibly using CSS3 / HTML5 / or some transparent PNG and negative margins or relative positioning?
I'm not asking for code or for you to do my work for me :) I'm just looking for ideas - just a bit of community brainstorming. If anyone has any suggestions please let me know, it might lead me to a solution.
Thanks!!
Assuming you're using a 'ul > li > a' structure for the menu, I would use two angled backgrounds (right and left... the right one is about 27px with the shadow, the left about 22px). Apply the left corner to the <li>, and the right corner to the <a>. That will give you doubled backgrounds on each list item, so you should use negative margins on each side of the <li> to pull its siblings to overlap. Then use z-index to make sure on hover or highlight that the menu item shows up on top of the others. I've added an additional 30px of padding on both sides to create the extra space around the text:
li {
margin-right: -27px;
margin-left: -22px;
padding-left: 52px;
position: relative;
background: url(leftcorner.jpg) left top no-repeat;
background-color: #3aa1cc
}
li a {
padding-right: 57px;
background: url(rightcorner.jpg) right top
}
li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat}
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat}
I haven't tested this but I think it should work... possibly with some additional tweaking.
This solution doesn't include the subtle inner shadow... to do that you would have to use a 1px repeating gradient background on the <li> then use :before and :after pseudo elements for the two corner background images.
Additionally in my code I put two seperate .jpgs (normal and hover) but really you should use a sprite and background-position so there is no flash while the hover state image is loading.
If you scroll to the bottom of this page - http://dev.socialadr.com/get/begin06 - you'll see that the white background w/ drop shadow stops near the end.
This is the image file that I want to repeat vertically:
http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif
The CSS file being used is:
http://dev.socialadr.com/_css/css.php
And I believe it's this #page_wrapper id that needs to be modified:
#page_wrapper {
width:1014px;
margin:0 auto;
padding:0;
min-height: 300px;
background: url(http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif) repeat-y center top;
height:100%;
}
I've tried tons of different things, read a bunch of other StackOverflow posts about similar issues but for the life of me I can't get it to work.
Any ideas?
Thanks!
Kane
Try placing quotes around the URL:
background: url('http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif') repeat-y center top;
Your live CSS does not include the repeat-y property given in your pasted code.
Additionally, your image file is very large. Since the image is meant to be tiled, the image height should be the height of one tiling.
You should also break the image up into two pieces and set them as backgrounds on two different elements. Tiling the current image will include the top part of the box with the corners, which is not what you want. Set the corners-only image as the background on one element, then the tile image on another element with repeat-y.
I am looking at the navigation bar on Linkedin.
http://www.linkedin.com/
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -320px transparent;
}
#nav-primary .wrapper {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -510px transparent;
height:39px;
padding:0 5px;
}
The background of #nav-primary controls the top part which I understand.
However, the background of #nav-primary .wrapper controls the bottom part, I really lost here.
If you look the background image sprite_global_v3.png carefully, at line 510, there is no color there, just transparent color, how this can make the shading bottom border displayed.
Based on my understanding, in CSS the background image starts from top-left corner with 0 0 and x grows from left to right. while y decreases from top to bottom.
Any idea?
Thank you
Based on my understanding, in CSS the background image starts from top-left corner with 0 0 and x grows from left to right. while y decreases from top to bottom.
Correct, however, what you think is happening is actually happening.
The .gif and .png files both support something called transparency, which is basically what you would think: you 'see through' the image to see the color that would be behind it.
PNG goes even farther in that you can have things partially transparent, which creates a neat effect. GIFs can only be totally transparent or opaque.
Some browsers don't like to cooperate nicely with transparent pngs though, but we don't care about that.
:D