Opacity hover on wall

I would like to use this hover tip with opacity: http://bavotasan.com/2011/amazing-hover-effects-with-css3/ on my wall. How exactly I can do it? I try it and clean cache but I don`t see it. Please advice

you can do this in the php code for that item.

or maybe in the html page and add the class and styles.

 Thanks. And do you know how exactly this can be done?
When I`m using Firebug in css only managed to reduce the opacity.

maybe you can tell me what it is exactly that you wanna do on the wall.

is that the outline or the newsfeed wall?

This is a simple main wall, with all the latest features being added to my website. You can see it here: http://www.areavis.com/index.php?lang=en

I would like to use opacity to hover effect for example like in http://www.pinterest.com/

I think this must be something like this, but I don`t know where exactly I must put this code:

img.opacity {opacity:1.0; img.opacity:hover {opacity:0.7;

Let me try this on my site...
Will answer you in about an hour.

I've got it working on the outline.

goto boonex/wall/templates/base/css/outline.css

place this bit of code at bottom

/* DIV or IMG shader begin */

.clearit img{
border: 1px solid #ccc;
opacity:0.3;
 filter:alpha(opacity=30); /* For IE8 and earlier */
}

.clearit :hover img{
border: 1px solid navy;
opacity:1.0;
 filter:alpha(opacity=100); /* For IE8 and earlier */
}

.clearit :hover{
color: red; /* irrelevant definition to overcome IE bug */
}

/* DIV or IMG shader end */

then goto boonex/wall/templates/base/outline_item_image.html

and look for div:

<div class="wall-oii-image __mod_prefix__-wall-oii-image bx-def-margin-sec-top-auto">__item_zoom__"><img class="wall-oii-image __mod_prefix__-wall-oii-image bx-def-round-corners bx-def-shadow" src="__item_icon__" title="__item_title__" width="__item_width__" height="__item_height__" /></a>
            </div>

change it with

<div class="clearit wall-oii-image __mod_prefix__-wall-oii-image bx-def-margin-sec-top-auto">__item_zoom__"><img class="wall-oii-image __mod_prefix__-wall-oii-image bx-def-round-corners bx-def-shadow" src="__item_icon__" title="__item_title__" width="__item_width__" height="__item_height__" /></a>
            </div>

and save it. then clear cache and refresh browser page

done!!

you can do the same for multiple images.

img.opacity {opacity:1.0; img.opacity:hover {opacity:0.7;

 WOW!! Thank you very very much! Looks awsome now.

I noticed that opacity not work for albums or module pages. Can it be improved?

img.opacity {opacity:1.0; img.opacity:hover {opacity:0.7;

make your changes here in this file: outline_item_image_grouped.html

look for:

<div class="wall-oii-image-wrp __mod_prefix__-wall-oii-image-wrp bx-def-padding-sec-topbottom">
      <bx_repeat:items>

and change to

<div class="clearit wall-oii-image-wrp __mod_prefix__-wall-oii-image-wrp bx-def-padding-sec-topbottom">
      <bx_repeat:items>

and save it. then clear cache and refresh browser page

done!!

 Many thanks! This works great, but I see only images from module "pages" are still not opacity. Where can I improve it?

Check the pages module template html files.
Maybe there is a file for the wall outline that you have to change.

 prabobly terms of: boonex/sites/templates/base/wall_outline.html

I try to change this code: <div class="wall-oii-image-wrp __mod_prefix__-wall-oii-image-wrp bx-def-padding-sec-topbottom">

to this code: <div class="clearit  wall-oii-image-wrp __mod_prefix__-wall-oii-image-wrp bx-def-padding-sec-topbottom">

I could see the effect of opacity, but unfortunately the photo "escaped" from the frame.
I did something wrong in this code?

 there is a 2nd div element underneath.

<div class="wall-oii-image __mod_prefix__-wall-oii-image bx-def-margin-sec-top-auto">

try to place in there

<div class="clearit wall-oii-image __mod_prefix__-wall-oii-image bx-def-margin-sec-top-auto">

 I did so, and unfortunately this is the same as in the screenshot below. Image jumps out of the frame. Please take a look:

undo previous change!! but stay in current html file...

now look for:

<bx_if:is_image>
                    <div class="bx_sites_unit_outline">

and change too <div class="clearit bx_sites_unit_outline">

do the same for

<bx_if:is_thumbhtml>
                    <div class="clearit bx_sites_unit_outline">

this will work

save and clear cache and refresh browser

Done!!

Thank you. I make this changes, cleared cache but still have this problem. Is there any other solution?

Did you clear your browser history too?
i have it working on my site with the module: sites.

 Yes, I cleared my history, cache, cookies...everything..but its not helped :(

This is my changes:

<div class="wall-oi-item __mod_prefix__-wall-oi-item" id="wall-event-__post_id__">
    <div class="wall-oi-item-cnt __mod_prefix__-wall-oi-item-cnt bx-def-round-corners bx-def-shadow">
        <div class="wall-oii-image-wrp __mod_prefix__-wall-oii-image-wrp bx-def-padding-sec-topbottom">
            <div class="wall-oii-image __mod_prefix__-wall-oii-image bx-def-margin-sec-top-auto">

                <bx_if:is_image>
                    <div class="clearit bx_sites_unit_outline">
                        <span></span><a href="__item_page__"><img class="bx-def-shadow bx-def-round-corners" src="__image__" /></a>
                    </div>
                </bx_if:is_image>
                <bx_if:is_thumbhtml>
                    <div class="clearit bx_sites_unit_outline">
                        <span></span><a href="__item_page__">__thumbhtml__</a>
                    </div>
                </bx_if:is_thumbhtml>

I will have a look after X-mas. If that takes to long then try to find the solution.

 Ok, thank you :) Merry Christmas!

Hello again. Is there any solution for this? Thanks in advance

 Hi, i had another look for the sites mod and the code works. but i haven't found the solution why it pulls the image down.