如果文字不在边框内，请使其隐藏CSS和HTML

Question

i have a round div whit background picture inside it. The picture outside the round div is hidden, can i do the same for paragraph text whit css and html only? here is JSfiddle

<div class="containereye">
  <div class="eye">
    <p class="eyetext">hello</p>
  </div>
</div>

.containereye{
  width:200px;
  height:200px;
}
.eye{
  box-sizing: border-box;
  box-shadow:0 5px 5px black inset;
width: 150px;
height: 150px;
border-radius: 100%;
background-image: url("http://i0.wp.com/himcistka.ru/wp-content/uploads/2015/03/centrifugaphotoshop-e1444999478943fs.jpg");
background-size: 250px;
background-position: center;
    -webkit-transition: background-size .5s ease-in-out; /* For Safari 3.1 to 6.0 */
    transition: background-size .5s ease-in-out;
    background-repeat: no-repeat;

}
.eyetext{
  background:red;

}
.eye:hover{
  background-size: 350px;
}

Answer 1

You can. Modify the .eye css class like this :

.eye{
  overflow: hidden;
  box-sizing: border-box;
  box-shadow:0 5px 5px black inset;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background-image: url("http://i0.wp.com/himcistka.ru/wp-content/uploads/2015/03/centrifugaphotoshop-e1444999478943fs.jpg");
  background-size: 250px;
  background-position: center;
  -webkit-transition: background-size .5s ease-in-out; /* For Safari 3.1 to 6.0 */
  transition: background-size .5s ease-in-out;
  background-repeat: no-repeat;