How to create transparent footer bar using css - html

I have JQM footer bar with text and icon. I need it to be transparent but the icon should be viewable. The background listview should be visible using css, like in iOS-7.

You can try using the code below and jsfiddle demo
Place any content in your footer or any container. Use opacity ( supported IE8+) for all of them and handle it using javascript or css on hover with some transition effect.
footer{width: 500px;
background: #999;
opacity: 0.4; // or use rgba() where a opacity.
}
footer:hover{
opacity: 0.6;
}

Related

Make Nav-Bar text change color when scrolling with CSS

I have a header that is transparent but becomes solid when scrolling, the problem arises because the headers Nav-Bar menu text color does not change along with the transparency of the header, theres multiple reasons why one would need this to happen.
So I am trying to make the Nav-Bar menu text change color when scrolling and i was wondering i could repurpose the CSS for the transparency of the header to fit this new purpose, i just don't know how.
The following CSS is for changing the transparency when scrolling:
selector.elementor-sticky--effects{
background-color: rgba(255,255,255,255)!important
}
selector{
transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 70px;
}
selector > .elementor-container{
transition: min-height 1s ease !important;
}
I need the above CSS to be repurposed to work so it changes color of the Nav-Bar instead of the background-color for transparency.
Here is the CSS for just setting the color of the Nav-Bar:
.elementor-nav-menu a {
color: #001C38 !important;
}
I figured it out, the scrolling effect were a part of Elementors plugin for wordpress.
the nav bar items are links therefore i could just target them with this
selector.elementor-sticky
--effects a,selector
.elementor-sticky--effects i{
color: #001C38 !important;
and have the same effect by to it as the other scrolling effect because of --effects

Hover effect not working

I have a few photos and I want on hover I want to cover them with background: black; I want to cover the whole image with black for example. The hover effect just doesn't appear. I suspect the problem is in the CSS selectors.
Here is the fiddle: http://jsfiddle.net/20oomme4/3/
I tested your fiddle and it is working. I modified the colors and tested again - and it worked again. However, you images were broken links, so I could easily see the background color. My guess is that your images are opaque and, therefore, you cannot see the color that is BEHIND them.
Your best bet is to create two images - one with normal color and one with black color. Call the normal image "NormalImage.jpg" and call the black background one "NormalImage_black.jpg". Then, onhover, replace ".jpg" with "_black.jpg" - and on mouseout, replace "_black.jpg" with ".jpg". If you are having trouble doing this with css, try using Javacsript - and remember to load all images (but hide the backgorund ones) upon page_load, so that when someone hovers, the browser doens't have to load the image - it only needs to display it.
I'm unsure of what you want exactly. If you want a transparent background to cover the image.
jsfiddle
Other wise you would need to use transparent png's to change the white to black background on the image itself.
.img-responsive.products {
border: 1px solid black;
cursor: pointer;
}
figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #2c3f52;
color: #ed4e6e;
}
figcaption {
height: 100%;
width: 100%;
opacity: 0;
color:#fff;
text-align: center;
backface-visibility: hidden;
transition: transform 0.3s, opacity 0.3s;
}
.col-sm-3:hover figcaption {
opacity: 0.4;
}
The hover effect is working as it is intended, the problem is the images are taking up the full area so you can't see any background effects. Try giving the images a padding:20px; to see the background changes. As mentioned above you will need to either create an image sprite or change the image to a transparent .png in order for the full background to change.
ex: http://jsfiddle.net/20oomme4/6/
Check this fiddle
This is the same CSS that you used, ie.
.img-responsive.products:hover {
background-color: black;
}
Only thing is that i've used a png image with no background. And as you can see in the fiddle your code works correctly.
So, As i mentioned in my comments, i would suggest you to use a png image without any background.

Opacity hover effect not working correct in IE

I have this simple hover effect http://www.mysecretathens.gr/Sera/index.html
#footer ul li:hover {
opacity: 0.7;
filter: alpha(opacity=40);
}
in the social media icons down in the footer, but in IE I see a blue-border all around each of the icons. How to fix that? Do you also see this?
I don't see it, but I suppose they are <a> anchor tags. So for IE you would have to add border:0px; for the anchor tags which are your social media icons.
If you have a link around an image IE automatically puts a border around it.
To remove blue border Add a { border: 0 } in your CSS
Add this to your css:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
Edit: add it before filter: alpha(opacity=40);
if you have an link (anchor), it is the standard of internet explorer. in this case you have to reset the border with:
a {
border :none;
}
or
a {
border :0px;
}
and for the next time, i recommend you jsfiddle where you can put easily your code to run and debug it on the site for questions here.

Transparent Form Background HTML

So I'm using this form from this site here
When I post the form in my website the entire form area is white background. Yet I keep looking through the code and I don't see anything specifying the color. Is there a way to make it so that it has an opacity of 0 or anything of the like? Thanks in advance.
Use this css rule:
#my_form
{
background-color: transparent;
}
Background color is the answer as previously posted by dotoree however as a side tip, use this CSS class to change the opacity of a div.
.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
I would go with a rgba value for the background color.
background: rgba(255,255,255,0.5); - white with a 50% transparency.

CSS Opacity Property

Hi i am using CSS Opacity Property for a div tag and it works well but the problem is when I write some text or paste images on that div tag they also become fade. I just need div back color to be fade and not the div content. My code is ...
#fade div
{
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
width:750px;
height:150px;
background-color:#FFFFFF;
}
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
}
Thankyou !!!
It's much easier to use rgba() or a transparent PNG for the background.
rgba(0, 0, 0, .1);
rgba(0, 0, 0); //fallback
You can use rgba() property for this:
write like this:
#fade div
{
background-color: rgba(0,0,0,0.1);
width:750px;
height:150px;
background-color:#FFFFFF;
}
For IE you can use IE filter
background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 & 7 */ zoom: 1;
You can generate your filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
Just use 1px semi transparent gif and repeat it by x and y. As far as I know it is the most easy way to set semi transparent background.
Ofcourse the opacity applies to the child elements as well.What you can do is to segragate your markup.
<div id='Div-With-Opacity-set'>
</div>
<div id='Child-Elements-for-the-above-div'>
</div>
Align your markup carefully such that the markup resembles what you want.
Why don't you reset the opacity then?
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
Your best bet without CSS3 is probably to create a div and put another div positioned on top of it, but not nested inside of it. Opacity filters down to ALL elements inside of the element with the opacity set.
If you put a div immediately to the right, and then gave it a margin of -750px;, you could give it an opacity of 1, but the div behind it could have an opacity of 0.1, and this would work fine.
With CSS3 you could do this:
#fade
{
width:750px;
height:150px;
background-color: rgba(255,255,255,0.1);
}
and just the background would be 0.1 opacity. The text would still be 1.
What I personally do most often though, is I create a small .png with the transparent background that I want, and then I set that .png as the background of an element. In photoshop I could set the opacity of the white background to 0.1, then save a 50X50 square, and then I've got nearly perfect transparency (no IE6).
something like http://jsfiddle.net/PWM5f/ you need