Uber menu mouse over transparent - css

hope someone will be able to help me!
I am trying to sort out an uber menu and transparency/opacity issue
The menu is shown here at www.simtechracing.co.uk and I have also attached a screen shot. Currently when the mouse rolls over the roll over changes to a solid grey. I can change the colour easy but would like to change the opacity (screenshot below) so as per the screenshot, the light grey rectangle will reduced opacity, so:
the background car will show through
looks less harsh when the user is using the menu.
I have tried various CSS code but without any success and wonder if anyone has some good ideas / code that might work. The plugin lets CSS be added to tweak the plugin further, although I cannot find anything in help sections or across the internet, which helps in anyway.
Any help will be greatly appreciated :)

Related

button height will not change even with -webkit-appearance: none

In real need of help here after about 3 to 4 hour of independent searching. I am building a website where it imperative I change the height of a button so iphone/ipad users get the correct style. After searching, people seem to be pointing me to the -webkit-appearance values and I've tried to impliment them with absolutly no luck. I have a codepen (https://codepen.io/osa10928/pen/awrmRG) where this was a problem too so you guys can look at that code and try and solve the problem there and hopefully I can carry yall's implimentation to my other project (I'm not at liberty to share my other projects code)
Looking at the codepen you'll see the buttons #start-button and #strict-button do not change height on iphones (or ipads I presume, I dont't have one to check). I've tried several things like including -webkit-apperance: none on a button tag, on the individual id's in css. I've inlcuded:
input[type=submit], input[type=reset], input[type=button]{
-webkit-appearance:none;
}
all to no avail. Please, could someone show me the proper implimentation of -webkit-appearance: none, or something else that will allow me to change button heights for iphone users?
Update Turning buttons into divs and restyling as buttons has been the best option. If anybody does have a working work around I'd love to hear it. Thanks all!
you can use padding top and bottom instead of height

Changing Wordpress background colour smoothly on page scroll

Can't seem to find an answer via search so wonder if anybody has advice please?
How to achieve a background effect like this - http://ustwo.com/
...easily :-)
Is there a plugin that might do it, for example?
Thank you.

Stationary Background, Moving Foreground Website

So I have been working on a website using the .NET framework and would like to make the background style look a little something like it does at bons.me. As you can see when you scroll it background stays in the same position, however as you scroll the part of which you see changes. Anyone know how I would go about doing this? Would it be something in css or ...? I'm rather new to web development, but it would also be just as much of a help if you could just point me in a direction or tell me what this is called so I could google it.
This deals with the css property background-position: fixed. David Walsh has a good article describing the technique here.

Change Background of css font code

I'm really new in this so, maybe you can help me!
I'm trying to change a background of this css, but I could not. Help me please!
P.s I just copy an example of other web page, so don't be extrange if you see something wrong please. (if you can't see the web page, maybe you should take a look over here https://www.charitywater.org/donate/#step-1) Just want to change the first big background and the last big background.
The css code:
When you say "first big background", I am assuming you mean the people in the background. If so, go into your style sheet (https://d555kv4p2mtwa.cloudfront.net/_site/styles/stylesheets/microsites/donate.css?v=10)
and modify the background property for .form-general{}
I was able to detect that image right away with Developer Tools for Google Chrome.

Google+ Games Buttons

I have no idea how to even start this question, but I was referred to Stack Overflow by a friend who basically told me that anything I need help with or to help others, I should come here. So I have a question for website designers and coders alike. (optional: have a google+ account for a visual aid)
If you go into Google+, you have all these cool features that seem advanced with code, but very basic in style. You hover over a button and it becomes animated like the in the games section. You have an image of the game in a div container I believe and it cycles through like its a gif or a timed sequence. At the bottom of the image, you see a small box from left to right, filled in with a different color, and has the name of the game on it. When you hover over said game a box begins to move from the bottom of the div to the top of the div completely covering up the image, but has more details in it. These details includes the description of the game and a button at the bottom that is a dark bluish that says play game, and when you hover over it, then it becomes a light blue like color.
Basically I want to create the same thing, but with different attributes. Same concept initially with the picture and the box with the name with a white border, but when you hover over it, then the background would be like a dark red with white text and a dark red button with a white border with the words view site and when you hover over it then it is like a light red.
I am making a portfolio website for my website designs and photoshop work. I think that this would be a great addition and I hope somebody or anyone can help me. I always give credit in my about pages if I didn't actually create something on my own.
Thank you for your time on reading this ridicuously long question, but I hope it relatively makes sense.
Your question makes sense and you can totally do it, personally I recommend learning HTML & CSS and creating a working demo - then hiring someone / finding someone to help build the features you want it to have. That way you have total control of the appearance, which I think is something that you're more interested about then coding the features ( you mention showcasing your design work ).
http://learn.shayhowe.com/html-css/terminology-syntax-intro/
Is a nice resource I saw today that might help you get started. In the future I think Stack Overflow is much more affective for specific questions related to specific issues, not something so broad as to code and design an entire web application.
Best of luck!

Resources