Here is link to slider all CSS can be seen inline in source code! Any help would be great just want to move text into gray background and keep image in place!
http://www.postrealty.net/test_site/index_test.html
Related
I am creating a website using wordpress and I've added some additional css also. There is a image and there is some text underneath it; when I hover over the image the image highlights but the text doesn't show up.
What I want is the text to appear with some background color when hover over it.
However your question is not clear enough to answer, may be its due to z-index values of image & text.
I am just a noob and want to ask that in my centralized image slider, I want that some image or text to appear to the right or some palce in my web page based on top or bottom half of the sliding image being hovered. Please, tell me how to do that ?
I'd like to do text highlighting by hovering a div behind the text via z-index*. If the element containing the text doesn't have a background, it works fine:
However, if the element has a background or background-color, it doesn't work as the background blocks the view of the div that's behind it:
Of course I can make the div be on top, but that looks terrible, as it colors the text itself:
You can see this problem in action with jsfiddle here. My question is: how can I have a div go behind the text but above the background?
* Why am I not using a span like everyone else? Because with div I can animate the highlighting's movement from word to word. That's in the jsfiddle also.
http://jsfiddle.net/V3Kae/9/
you could do it like this. setting the z-index of the container to be lower then the highlight, an the z-index of the text to be higher then the highlight.
Good day, I have a DIV of fixed width and height on my HTML page. In normal state it should show image A on the background and in hover state it should show image B. I know how to do it using CSS and two image files A and B. Somewhere I saw those two images (A and B) put into a single image file and then they somehow wrote CSS so that in normal state the DIV showed upper half of the image on the background and in a hover state it showed the bottom half of the image. Could you please advise CSS code to achieve this? The DIV has no position set but it is a child of a DIV with relative position. Thank you in advance.
Vojtech
This is called CSS spriting and is an awesome technique that everyone should use.
See this answer for a good overview. What it comes down to is having a DOM element with a defined height and width and using a background image that is larger than that area. Then you can selectively show only portions of that background image using background-position
I have just finished my PSD design for a website and am stuck at the text field.
How would I get a text field to maintain the size of the round corners of the background image?
Something similar to the sliding doors technique that you can do with perhaps?
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
The text field doesn't actually need round corners, background images of the wrapping DIV elements do.
The "sexy buttons" tutorial will work - instead of having text inside the span (as described in the tutorial), drop in your input box. Set border:0 and background-color:transparent for your input.