悬停时可见的CSS动画

Question

我的圆圈下面有一个图片。

当我将鼠标悬停在圆圈上时，我希望圆圈变大并成为图像的遮罩。 我这样做是这样的：（在Webkit中工作）

 .clip { position: absolute; -webkit-clip-path: circle(40px at center); -webkit-transition: -webkit-clip-path 2s; /* Safari */ transition: -webkit-clip-path 2s; } .clip:hover { -webkit-clip-path: circle(75px at center); visibility: visible; } } 

 <div class="clip-wrapper"> <div class="clip"> <p>Workshops</p> <img name="workshops" alt="workshops" src="http://lorempixel.com/422/750" width="422" height="750" /> <div class="workshops-container"> <div class="workshop"> <img name="workshop1" alt="workshop1" src="_img/ws1.png" width="placeholder" height="placeholder" /> <header> <h1>Workshop 1</h1> </header> <p>Lorum ipsum</p> </div> <div class="workshop"> <img name="workshop2" alt="workshop2" src="_img/ws2.png" width="placeholder" height="placeholder" /> <header> <h1>Workshop 2</h1> </header> <p>Lorum ipsum</p> </div> </div> </div> </div> 

我现在想做的是以下内容：

我希望将鼠标悬停在圆圈上之后，里面的文本将是可见的，还有其他一些东西（div workshops-container）。 我该如何开始？ 我似乎找不到如何使这项工作。