<div class="image-hover">
  <div class="img-wrap">
  <img src="http://zeypo-design.com/ressources/img/laurent.jpg" />
  </div>
  <div class="img-shadow"></div>
  <div class="hover"><p>Bienvenue au Moulin Rouge</p><hr/></div>
</div>
@import "compass/css3";

@import "compass";

body {
  padding-top:50px;
  font:15px "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:300;
  line-height:1.625;
  background:url(https://subtlepatterns.com/patterns/diamond_upholstery.png);
}

.image-hover {
  position:relative;
  display:inline-block;
  border:1px solid #c4c4c4;
  left:50%;
  margin-left:-210px;
  width:420px;
  height:420px;
  border-radius:500px;
  padding:20px;
  @include background-image(linear-gradient(top, #cccccc, #dddddd));
  box-shadow:0px 1px 0px 1px rgba(250, 250, 250, 0.5) inset;
  &:hover .hover{
      width:420px;
      height:420px;
      top:0;
      left:0;
      -webkit-animation:roll-anim 0.5s ease 0s;
      hr {
        -webkit-transition:all 0.7s ease 0.3s;
        margin:0 30px;
        opacity:1;
        border-width:1px;
        padding:0;
        border:0;
        height:1px;
        background-color:#fff;
        border-color:#fff;
        color:#ff;
      }
  }
}
.img-shadow {
  box-shadow:0 0 20px rgba(0, 0, 0, .6) inset;
  width:420px;
  height:420px;
  position:absolute;
  z-index:1000;
  border-radius:500px;
}
.img-wrap {
  position:absolute;
  top:20px;
  left:20px;
  border-radius:500px;
  z-index:100;
  height:420px;
  width:420px;
  overflow:hidden;
  border-radius:500px;
}
img {
  height:420px;
  border-radius:500px;
  overflow:hidden;
}

.hover {
  overflow:hidden;
  width:0;
  height:0;
  opacity:.9;
  position:absolute;
  z-index:200;
  top:50%;
  left:50%;
  margin-top:20px;
  margin-left:20px;
  background-color:#ce4b4b;
  border-radius:500px;
  transition:all 0.5s ease-in-out 0s;
  animation:roll-anim-end 0.5s ease 0s;
  p {
    text-align:center;
    color:#fff;
    margin-top:45%;
  }
}
hr {
  margin:0 210px;
  opacity:0
}


@-webkit-keyframes roll-anim {
 from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes roll-anim-end {
 from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.