Как ограничивать HTML/CSS/Клип/Маска объекта?

Question

Это мой HTML:

http://jsfiddle.net/aALJ6/ (использовать это, вероятно, лучший)

<article> 
<a href="http://www.somepage.com"> 
    <header> 
     <div class="details"> 
      <h1>Title</h1> 
      <p>More text</p> 
     </div> 
    </header> 
    <span class="bw-wrap"><img src="http://lorempixel.com/353/324/sports/" alt="NASA Space Apps Challenge" class="bw" /></span> 
    <span class="clr-wrap"><img src="http://lorempixel.com/353/324/sports/" alt="NASA Space Apps Challenge" class="clr" /></span> 
</a> 
</article> 

И вот CSS:

article { 
    background:#d0d0d0; 
    border:1px solid #b9b9b9; 
    border-radius:150px; 
    float:left; 
    margin:0 0 30px 30px; 
    overflow:hidden; 
    padding:9px; 
    position:relative; 
    transition:all 0.2s ease-in; 
    -webkit-transition:all 0.1s ease-in; 
    -moz-transition:all 0.1s ease-in; 
    -o-transition:all 0.1s ease-in; 
    width:280px; 
    height:280px 
} 
img { 
    border-radius:140px; 
    position:absolute; 
    top:9px; 
    left:9px; 
    overflow: hidden; 
} 
.clr { 
    opacity:0; 
    z-index:1; 
    transition:all 0.2s ease-in; 
    -webkit-transition:all 0.2s ease-in; 
    -moz-transition:all 0.2s ease-in; 
    -o-transition:all 0.2s ease-in 
} 
article:hover.clr { 
    opacity:1 
} 
.portfolio-single { 
    float:left; 
    padding-bottom:30px; 
    position:relative; 
    width:100% 
} 
article:hover { 
    background:#272123; 
    border:1px solid #272123 
} 
h1 { 
    position: absolute; 
    left: 65px; 
    top: -20px; 
    z-index:100; 
    text-align:center; 
} 
p { 
    position: absolute; 
    left: 95px; 
    top: 30px; 
    z-index:100; 
    text-align:center; 
} 
article { 
    background:#d0d0d0; 
    border:1px solid #b9b9b9; 
    border-radius:150px; 
    float:left; 
    margin:0 0 30px 30px; 
    overflow:hidden; 
    padding:9px; 
    position:relative; 
    transition:all 0.2s ease-in; 
    -webkit-transition:all 0.1s ease-in; 
    -moz-transition:all 0.1s ease-in; 
    -o-transition:all 0.1s ease-in; 
    width:280px; 
    height:280px 
} 
img { 
    border-radius:140px; 
    position:absolute; 
    top:9px; 
    left:9px; 
    overflow: hidden; 
} 
.clr { 
    opacity:0; 
    z-index:1; 
    transition:all 0.2s ease-in; 
    -webkit-transition:all 0.2s ease-in; 
    -moz-transition:all 0.2s ease-in; 
    -o-transition:all 0.2s ease-in 
} 
article:hover.clr { 
    opacity:1 
} 
.portfolio-single { 
    float:left; 
    padding-bottom:30px; 
    position:relative; 
    width:100% 
} 
article:hover { 
    background:#272123; 
    border:1px solid #272123 
} 
h1 { 
    position: absolute; 
    left: 65px; 
    top: -20px; 
    z-index:100; 
    text-align:center; 
} 
p { 
    position: absolute; 
    left: 95px; 
    top: 30px; 
    z-index:100; 
    text-align:center; 
} 

Я знаю, что это довольно сложно, но вот проблема под рукой: Этот div с классом деталей - это в основном темный прямоугольник, и я хочу, чтобы он содержался в круге, что статья/img. У них круглая граница, так что я хочу видеть, когда непрозрачность идет до 100%. Чтобы показать, в чем проблема, я сделал непрозрачность по умолчанию 50%, как вы сможете увидеть, когда этот div находится в состоянии покоя, все операции отсечения, однако во время анимации отображается полный прямоугольник, и только после этого действительно разрушает вещи.

Answer 1

Это сработало!

HTML:

<img class="logo-mask" src="Text2.svg" /> 

CSS:

.logo-mask { 
opacity:0; 
position:absolute; 
-webkit-mask-image: url("TextMask2.svg"); 
} 

С этим, все это прекрасно работает. Жаль, что Dreamweaver, похоже, не признает этого, и поэтому я не получаю никакого реального обновления, но браузеры, похоже, его принимают. БОЛЬШОЕ СПАСИБО!!!