Con jquery puoi fare in vari modi. Ci sono diverse funzioni per creare transizioni sulle proprietà degli elementi.

Ecco un esempio pratico con fadeTo():
codice:
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type='text/javascript'>
      $(function(){
        $(".didascalia img").fadeTo(0,.6)
        $(".didascalia>a").hover(
          function() {
            $(this).children("img").stop().fadeTo(250,1)
          },
          function() {
            $(this).children("img").stop().fadeTo(250,.6)
          });
      });
    </script>
    <style type="text/css">
      div.didascalia img {
        border: 0;
        display: block;
      }
      div.didascalia a {
        position: relative;
        float: left;
        color: #FFF;
        text-decoration: none;
        display: block;
      }
      div.didascalia span {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 3px 0;
        color: #FFFFFF;
        background-color: rgba(35,31,32,0.75);
        cursor: pointer;
        text-align: center;
        height: 50px;
        font-size: 10px;
        font-family: "Open Sans", Arial, sans-serif;
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <div class="didascalia">
      <a href="#">
        <img src="image.jpg" alt="" />
        <span>Calendari e blocchi</span>
      </a>
    </div>
  </body>
</html>