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.
Related
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
firstly, I'm a UI/UX designer, please excuse me for my poor CSS/HTML.
I'm trying to introduce a background blur under some text which is on an image. Currently the div is set to a slightly transparent red colour which creates this overlay.
This is wordpress based and as such I'm trying to figure out a way to do this via CSS by inspecting the site in Chrome
Please look at the photos and descriptions for better understanding into what I am trying to do.
First image is the current situation
Second image (4) is the desired situation
Unfortunately my reputation isn't high enough to display more
So based on what the user colonelsanders has commented, I was able to introduce a new div and blur the background!
Thanks everyone and sorry for the poor post
You don't give any code so I'll have to guess.
If your main background is fixed, then you can add an extra element ( we'll call it "cover" ) in the element that you want the blurred background ( we'll call it "blur" ), stretch the "cover" to fill the "blur's" width and height, set the main background to the "cover" with fixed position, and use the blur filter on it.
I am trying to make a basic page using wordpress, so i add many raws, and for each raw, i edit and upload a background image.
The problem i have is, why if i increase the font, or make the margin down, the image shrinking. I want the image full sized that row, so whenever i increase the font or add spaces, that will keep or maximize the background image, not shrink it.
This is the page i refer, http://www.zeidny.com/index.php/solutions/
Thanks all for your help,
your code should be
<p class="solu1"><span>"I have a message, I want you to hear"</span>
instead of
<p><span class="solu1">"I have a message, I want you to hear"</span></p>
and set min-height for background image and remove margin-bottom style.
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.
I am trying to create a menu bar which will consist of a series of icons and text laid out horizontally. I am using an unordered list as the container, but I am having a problem. All of the menu items which contain no text, just an empty anchor tag with a background image, display in-line just fine.
However, whenever I try to use text, instead of a background image as a menu item, the text list item is slid downward. You can see this example on JSFiddle, be sure to rollover each of the items to see how the background color indicator behaves: http://jsfiddle.net/pAfgm/6/.
Notice how each of the links with a globe icon (yes, I hot-linked from Facebook for this example) displays nice and neat. However the text and it's background indicator are way off alignment. I see this is the case for FF 3.6, Opera 11, but not IE7! For once, IE7 isn't having a problem where other browsers are.
Could someone please show me how I can correct this issue?
Thank you for your time!
You simply need to add vertical-align: top to nav.pluginBar ul.pluginBarLeft li, on which you also have display: inline-block.
See: http://jsfiddle.net/pAfgm/7/
The default vertical-align value is baseline, which is the cause of this problem.
See the difference between different vertical-align values here:
http://www.brunildo.org/test/inline-block.html
See the "baseline" section here for a graphical explanation:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/