Just playing around with the box-sizing:border-box; + border trick. What d'you think ? :)

index.html

<div id="wrapper">
  <h1>
    <span class='light'>Hugo</span>Giraudel
    <span class='role'>Webmaster</span>
  </h1>
</div>

style.scss

@import "compass";
* {
 	box-sizing:border-box; 
}

body {
 	background:#EDEDED;
  font-family:Helvetica, Arial, sans-serif;
  font-size:20px;
}

#wrapper {
  width:250px;
  height:250px;
  margin:30px auto;
  position:relative;
  background:url('http://tank-a-faire.com/hg.jpg') -115px -75px;
  backgrouns-size:200% 200%;
  border-radius:50%;
  text-align:center;
  font-size:1.2em;
  border:125px solid black;
  box-shadow:
    0 0 0 5px #fff,
    0 0 0 10px #111,
    0 0 10px 10px rgba(0,0,0,0.5);
  transition:all 0.3s ease-out;
  color:white;
 
}

#wrapper:hover {
 	border:0px solid black;
	
  .role {
 	letter-spacing:0; 
  }
}


h1 {
 	position:absolute;

  top:50%;
  left:50%;
  line-height:1.5em;
  margin-left:-100px;
  font-weight:bold;
  margin-top:-18px;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,0.4);
  
  .light {
   	font-weight:normal; 
  }
  
  .role {
   	content:"Webmaster";
    display:block;
    transition:all 0.3s ease-out;
    font-weight:normal;
    font-size:0.5em;
    letter-spacing:15px;
    position:absolute;
    left:2px;
    top:20px;
  }
}