/* images abdunkeln (Startseite, Akkordeon)
--------------------------------------------------------------------------------------------*/
 
.image:after,
.image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transform: scale(0.95);
    transform-origin: center center;
}
 
.image:after {
    content: '\A';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background:rgba(0,0,0,0.33);*/
    background: rgba(55, 55, 55, 0.5);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,fefcea+100&0.8+0,0+99 */
    background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 0%, rgba(251, 249, 232, 0) 99%, rgba(254, 252, 234, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 0%, rgba(251, 249, 232, 0) 99%, rgba(254, 252, 234, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(251, 249, 232, 0) 99%, rgba(254, 252, 234, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00fefcea', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    border-radius: 3px;
    transform: scale(0.95);
    transform-origin: center center;
}
 
.image:hover:after,
.image:hover:before {
    opacity: 1;
}
 
.image:before {
    content: attr(data-content);
    font-size: 48px;
    width: 100%;
    color: #fff;
    z-index: 1;
    top: calc(50% - 48px);
    padding: 0;
    text-align: center;
    background: transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    transform: scale(0.95);
    transform-origin: center center;
}
 
 

<script type="text/javascript">
//<![CDATA[
      $(document).ready(function () {
          $("#cc-m-13040092636 .cc-imagewrapper a", #cc-m-12698245836 .cc-imagewrapper a").addClass( "image" );
          
          //add data content
          $('#cc-m-13040092636 .cc-imagewrapper a').attr('data-content', 'Text added on hover');
          $('#cc-m-12698245836 .cc-imagewrapper a').attr('data-content', '2nd Text added on hover');
      });
//]]>
</script>