I want to use the CSS visited functionality in the browser to style a clicked image:
CSS:
.gridview a.plusminus:visited img
{
/* from http://my.opera.com/BleedingHeart/blog/2007/04/29/highlighting-visited-images-using-css */
background: transparent !important;
opacity: 0.2 !important;
}
HTML:
<a class="plusminus" href="#12345" onclick="/* code to exand a panel*/" onfocus="this.blur();">
<img title="Expandera" src="img/grid_plus.gif" width="14" height="14"/>
</a>
This works fine in Firefox 3.5.
But for i.e. Explorer the opacity/transparent trick don't work. Is there a way that I can do this cross-browser?
Also explorer seems not to remember "#12345" type of hrefs for visited links when reloading pages. Any way to fix that?
for opacity:
.gridview a.plusminus:visited img {
-moz-opacity: 0.2; filter:alpha(opacity=20); opacity: 0.2;
}
sorry don't know about remembering of anchor refs (but as I know they should work)
.gridview a.plusminus:visited img {
opacity: 0.2;
-ms-filter: "alpha(opacity=20)"; /* IE 8 */
filter: alpha(opacity=20); /* IE 4-7 */
}
Related
I'm creating this landing page: https://oakfield.online/
To give more focus on the image, I've tried to create a zoom effect on mouse hover. The objective is 50% achieved, the only thing that I couldn't do was to make the img tag to be on top of the columns beside that image.
This is the result:
There is my css hover code for the img:
.box-imagem img:hover {
z-index: 999999;
transform:scale(1.1);
-ms-transform:scale(1.1); /* IE 9 */
-moz-transform:scale(1.1); /* Firefox */
-webkit-transform:scale(1.1); /* Safari and Chrome */
-o-transform:scale(1.1); /* Opera */
}
Any ideas about what should work?
Thanks!
.tcb-flex-col.tve_empty_dropzone:hover {
z-index: 9999999;
}
Play with that - your containers are fighting for powerrrrr. :)
You can do like this in two ways
1)
.tcb-flex-col>.tve_empty_dropzone:hover {
z-index: 9999999;
}
2)
.tcb-flex-col.tve_empty_dropzone:hover {
z-index: 9999999;
}
Is there a CSS code that changes this text
This is it
to this one
ti si sihT
Try this
.cssClassName { direction:rtl; unicode-bidi:bidi-override; }
EDIT:
apply this class to a paragraph tag and you should get the results your looking for.
Yes, there is:
.reversed {
direction: rtl; unicode-bidi: bidi-override;
}
Thats not right to left, thats mirroring.
CSS:
direction: rtl;
unicode-bidi:bidi-override;
#victor-jalencas gave the answer.
The other thing some people here started talking about is flipping and it is done with replacing the normal text with Unicode flipped equivalents.
Example can be found here: http://www.revfad.com/flip.html
You can use CSS filter filp (Only supported in IE)
<div style="width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: FlipH">CSS Tutorials</div>
Try this, IE does seem to have a bit of a hard time rendering fonts smoothly, but it works like a charm in all browsers. I have tested IE 7-9, Ff, Chrome and Safari on Win 7
.flipText {
display: block;
-moz-transform: scaleX(-1); /* Gecko */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* webkit */
transform: scaleX(-1); /* standard */
filter: FlipH; /* IE 6/7/8 */
-ms-filter: "FlipH";
}
I am trying this code:
<div id ="crop_image">
<img class="one" src="http://www.dreamincode.net/forums/uploads/monthly_05_2010/post-380028-12747928967239.jpg.pagespeed.ce.yRppR_j7ae.jpg" />
</div>
#crop_image:not(.one) {
width: 100%;
height: 100%;
background-color: red;
filter: alpha(opacity=20); /* internet explorer */
-khtml-opacity: 0.2; /* khtml, old safari */
-moz-opacity: 0.2; /* mozilla, netscape */
opacity: 0.2; /* fx, safari, opera */
}
However, the img still have opacity. What is wrong ?
demo
Mixing a few tricks (inline-block, absolute positioning, etc.) you can get a semi-transparent div to overlay an image.
demo
you can try this...(revised)
#crop_image img:not(.one)
I'm not sure what you're trying to do there, but I can explain why it is setting the opactiy to .2.
#crop_image:not(.one) means an element with the ID of crop_image which does not have the class of one. If you look at your crop_image it does not itself have the class of one so this will match. The crop_image contains an element which has the class of .one, but that is not what not does.
I'm trying to incorporate thickbox on my site. Basically, it's just a fancy javascript alert with a lot more functionality. However, when you the thickbox appears it darkens the rest of the screen. Id rather not have this. I have searched the CSS file extensively and cannot find how to change the opacity/background color. Any help would be appreciated.
link to CSS file:
http://jquery.com/demo/thickbox/thickbox-code/thickbox.css
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
The "darkening of the screen" is caused by a black overlay with 75% opacity.
Change background-color to transparent if you do not want this.
It's this:
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
You can just empty the content or remove it altogether and problem is fixed!
#riku; you can use rgba for transparent color, like this
css:
.TB_overlayBG {
background: rgba(0,0,0,0.7)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */
}
Because rgba is not transparent it's content as opacity does
For more check THIS
I have code that works in Chrome and Firefox, but not in IE8.
<a href="javascript:void();" class="shareActionLink" id="comment">
<img src="comment.gif" class="shareActionImage" />Comment
</a>
The CSS for this is:
.shareActionLink:link, .shareActionLink:visited
{
margin-right:8px;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; /*IE8*/
background-color: #fff;
}
#shareActionsBox .shareActionLink:hover
{
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/
}
Based on other StackOverflow posts, I added the IE filters, which helped to adjust the text opacity, however, the image opacity still doesn't change in IE. It works fine in other browsers.
I suspect that this is happening because the img is nested within the link. How do I get the image to change opacity in IE??
Thanks
MS filters only work in IE7 if the hasLayout property is set to true, they only work in IE8 on block elements, or if you set the display property to block or inline-block.. as you're trying to use this on an inline element, the a, then setting display: inline-block; should solve it for all IE's as it works to set hasLayout for IE7 and also keeps IE8 happy
.shareActionLink {
display: inline-block; /* IE needs but shouldn't hurt anyone else */
}
.shareActionLink:link, .shareActionLink:visited {
margin-right:8px;
background: #fff;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* IE */
}
.shareActionLink:hover {
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* IE */
}
Off the top of my head, setting opacity on a parent element means it's children elements get, erm, opacitied? as well.
To target the image specifically, add img after each of the css selectors; e.g.:
#shareActionsBox .shareActionLink:hover img
to target the image whenever the parent link is something (in this case when hovered).
I could not get this to work in IE6 without targeting the <img> element. I've not got IE8 installed so cannot be sure this demo will work in that browser. However, it does work in IE6, Chrome11 and Firefox4.
Also, it is worth noting that if your comment.gif has transparency then you may have further problems with the transparent part unless you set a background-color or use JavaScript to handle the hover. See another answer I wrote on this.