2952 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+10 more
DDStudios says

Does anyone know a good tutorials about Opacity stuff. You know like we see a lot on portfolio when there is a lot of image and then when you hover it become darker or lighter or more saturated ..

Thanks !

709 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+2 more
ChillThemes says
18 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
chillyorange says

Why not just use jQuery to manipulate the opacity of an object? There is no need to worry about the different implementation of opacity between browsers (meaning between IE and real browsers).

You can just use the jQuery css() function to manipulate the opacity or the animate() function to animate the manipulation.

Can’t think of any tutorial right away…

2952 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+10 more
DDStudios says
Something like this? http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/

Yeah that look good .. Any other suggestion anyone ?

2952 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+10 more
DDStudios says
Why not just use jQuery to manipulate the opacity of an object? There is no need to worry about the different implementation of opacity between browsers (meaning between IE and real browsers).

You can just use the jQuery css() function to manipulate the opacity or the animate() function to animate the manipulation.

Can’t think of any tutorial right away…

I don’t have any Jquery knowledge right now , I shouuld learn it someday.

18 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
chillyorange says
Why not just use jQuery to manipulate the opacity of an object? There is no need to worry about the different implementation of opacity between browsers (meaning between IE and real browsers).

You can just use the jQuery css() function to manipulate the opacity or the animate() function to animate the manipulation.

Can’t think of any tutorial right away…
I don’t have any Jquery knowledge right now , I shouuld learn it someday.

Sorry, my bad! I thought with all the nice themes you released, you knew some jQuery stuff already… Anyway, it’s definitely worth getting into!

2952 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+10 more
DDStudios says
Why not just use jQuery to manipulate the opacity of an object? There is no need to worry about the different implementation of opacity between browsers (meaning between IE and real browsers).

You can just use the jQuery css() function to manipulate the opacity or the animate() function to animate the manipulation.

Can’t think of any tutorial right away…
I don’t have any Jquery knowledge right now , I shouuld learn it someday.
Sorry, my bad! I thought with all the nice themes you released, you knew some jQuery stuff already… Anyway, it’s definitely worth getting into!

lol thanks for the compliment but no , I don’t :)

Actually I learned HTML /CSS some month ago only .. all that computer stuff is new for me , even design lol !

426 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 10+ members
  • Has sold $5,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+3 more
vasilios says

LEARN JQUERY DD . NOW.

But, yes, with images, you just create a 1×1 pixel GIF /PNG image that is filled with a certain opacity of a certain color, and then set that as the background image and repeat it. For a rollover effect, create another image with another opacity and/or color.

If opacity is to be used on my personal site, I just use rgba. :)

2952 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 200+ members
  • Has sold $125,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+10 more
DDStudios says
LEARN JQUERY DD . NOW.

But, yes, with images, you just create a 1×1 pixel GIF /PNG image that is filled with a certain opacity of a certain color, and then set that as the background image and repeat it. For a rollover effect, create another image with another opacity and/or color.

If opacity is to be used on my personal site, I just use rgba. :)

Oh ok , so I could use any pattern .. pretty interesting.

638 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $100+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
RobbyDesigns says

Let’s let bygones be bygones mate: Download this small template, look at the code, it will all be clear. http://www.robbydesigns.com/previews/opacity.zip

(Needs a hack or something for Firefox but good in IE)

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by