date una vuelta por acá para que comprendas mejor lo que ocupas y puedas personalizar a tu gusto (esto por parte de css):
[URL="http://www.impressivewebs.com/css-opacity-reference/"]http://www.impressivewebs.com/css-opacity-reference/[/URL]
Y para poder controlar la parte del div con tu imagen, creo que no será únicamente con css, podrías utilizar jQuery para ese proposito:
te cargo acá el ejemplo, haber si es lo que ocupas (lo seccione para que vieras el resaltado de sintaxis de javascript, pero va todo junto en realidad, en la página se ve el trabajo:
[URL="http://daw.com.mx/fdw/hlp1-opacity/"]http://daw.com.mx/fdw/hlp1-opacity/[/URL]
Y te publico el source:
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="googlebot" content="noarchive,nofollow"> <!-- Mando llamar la librería jQuery de google, puedes bajar una copia a tu server o mantener ésta: -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
Código Javascript
:
Ver original/* Iniciaremos las propidades haste que la página
haya sido cargada completamente, asi evitamos problemas
*/
$(document).ready(function () {
/* Estoy utilizando dos links, "link_fire" y "link_unfire", son ID's ambos
con: e.preventDefault(); deshabilito la carga de tu página "link.html"
despues localizo tu div "menu_left_imag" y le aplico la propiedad
correspondiente, en este caso la opacidad va de: 0, 0.1, 0.2, etc..
hasta un máx. de 1 (100%)
*/
$("#link_fire").click(function(e){e.preventDefault(); $(".menu_left_imag").css({ opacity: 0.5 }); });
$("#link_unfire").click(function(e){e.preventDefault(); $(".menu_left_imag").css({ opacity: 1 }); });
});
Código HTML:
Ver original<div class="menu_left_imag"> <!-- utilizé un doodle de google para el ejemplo-->
<img src="http://www.google.com/logos/2012/jaakonpaiva-12-hp.jpg" />
<div align="center" class="container"> <!-- agregue un vinculo más aparte del tuyo para ver como se puede jugar con las propiedades -->
<a id="link_fire" href="link.html"> <span class="title">link to opacity
</span> <a id="link_unfire" href="link.html"> <span class="title">link to reset opacity
</span>