The problem is the following: I have a gallery plugin on Wordpress, called Fancy Plugin installed. Works fine, except now when I look at the gallery, the images are very very faint (the opacity is very low), then, if I hover over the image, it gets less opaque, then I hover again and it gets better and better. I need like 10-15 mouse passes for the image to be on opacity close to 0.9, but then it does not change anymore. I want to switch this off completely, I do not want any kind of opacity in the gallery, I want it to be 1. I don't know what CSS to use to do this.
I tried inspecting with Chrome DevTools, that's how I found this piece of code:
<img class="fg-thumb" src="http://www.faktumkft.hu/wp-content/plugins/radykal-fancy-gallery/admin/timthumb.php?src=http%3A%2F%2Fwww.faktumkft.hu%2Fwp-content%2Ffancygallery%2F2%2F2%2Fvizszintes_palcas_korlat__09.jpg&w=200&h=150&zc=0&q=100" alt="Vízszintes pálcás korlát, ívelt" style="width: 200px; height: 150px; opacity: 0.825593;">
I can see the weird opacity number that seems to be kind of random, there, but I don't know how to change it. Can someone help please? Thanks!
Fast fix would be adding next to your css:
.fg-thumb{
opacity:1 !important;
}
However what you find pointing to so called in-line styles, and they may come from some javascript (may be from that plugin). You may want to read some documentation or/and check source code if it is available.
Related
Im building a website and I cant get this text color to change.
(link to full size image of text im trying to change)
https://i.stack.imgur.com/e5FQ1.png
Ive tried using
color: gold;
and ive also tried using the !important tag as well.
Ive spend hours just sitting and staring but no ideas have come to me.
The link to the webiste is https://luxtent.by/ and when you are inspecting element make sure to set the view type to iPhone 6/7/8.
Also another issue that I cant figure out is that the icons are white on screen but, when if you look in inspect element, they are gold.
If you have any ideas feel free to try them out in inspect element and let me know if you have any questions.
Your color change is not working because you are using the grayscale filter on the parent element
.w-iconbox {
filter: grayscale(1) contrast(5) !important;
transition: 0.1s;
}
Remove this code and you'll be able to set any color
I'm being forced to use this browser called Fresco by ANT. In it's specs it says it can handle CSS1. So I'm trying to create a link that has an image, and when hovered over, have the image change.
I've tried:
<td width="30% valign="top" align="left">
<div id="changeImage"></div>
</td>
My CSS is as follows:
#changeImage{
background: url(somefilepath1);
width: 218px;
height: 52px;
}
#changeImage:hover{
background: url(somefilepath2);
}
It works fine in Chrome, Firefox, etc... But in this awkward browser called Fresco, it doesn't show the image at all. I'm not even sure if this is considered CSS1 approved? I've googled and found CSS1 stylings, but nothing to exactly define what I'm trying to do. Any web guru have any tips on this for me?
Sounds like it has trouble reading the psuedo :hover. Technically this was implemented in the early days to be used with only an anchor. I believe Internet Exploder 6 has :hover support only for anchor elements still. This soon has been changed to support all elements on a page.
I would say, try using a sprite sheet where the backgrounds are loaded already and changing the background position of this element. Which would be best practice to do anyways because, you will get instant action, instead of triggering a server request and having the user wait for the new content to arrive.
Here is more detail on the technique and CSS1 does support the background position element
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I think I asked about the opposite problem a while ago (allow mouse event to pass through a transparent area on an image - I ended up using an imagemap for that) but anyway:
I need a mask element for when a dialog comes up. In the past I've used:
position:fixed;
left:0;top:0;right:0;bottom:0;
background:#000000;
opacity:0;
filter:alpha(opacity=0);
And it works, but it's kind of a "hack".
I've not been able to get an element with background:transparent to intercept mouse events. Is this intentional? Is there any way around this other than the above? Or is the above the best solution for this problem?
The issue with background:transparent appears to be specific to IE (tested in IE7/8/9). It's not an issue in other browsers.
It's also specific to HTML form elements. For instance, it works fine in IE for text inside a paragraph tag but not for a button tag. Most likely it's a rendering bug in IE, rather than the result of a deliberate engineering decision by Microsoft. There used to be a similar issue in IE6 with select boxes not layering correctly with position:absolute.
It'd be safer to use opacity than background:transparent in this case. It may feel less like a hack if you change the opacity of the mask to make it partially transparent instead of fully transparent.
I have an unordered list with image links and when you hover over them they fade out a little bit and this shows all good in every browser except IE, of course. At first I thought it was just a png bug but after applying both of those fixes it still doesn't work. The page is at:
The page.
If anyone knows what is going on please let me know as I am completely stumped now. Thanks
It appears to work in IE7 and IE9, but not IE8. Interested, never seen that before.
Anyway, you can fix the problem by using a different method. Instead of using a list, just have your images (with links) inside the containing <div>, then apply a style to the links such that they have display: inline-block; - this will allow you to align them vertically with each other (vertical-align: middle;) and set their width if you want.
The opacity fade is being achieved by styles that IE doesn't support
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
It works in IE9 so first guess is you are using some css or javascript that isn't supported for earlier versions. You need to post the code so we can give you better guidance on how to resolve this.
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
Also, I have checked the CSS and there are no styles that contain a white background colour element.
Any one got any ideas?
Many thanks!
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
When calling the button, I've typed this out to begin with:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
EDIT (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
What you need to do, in the CSS you have to call the following:
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
try adding
border: none;
to your button style.
I think if you have already tried setting:
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
Edit (20th Jan):
I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything).
If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
It's kinda weird :D
check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image