title: Image out of circle
body: <p>How to put placehold it image into circle with overflow: hidden;
  Here is code <a href="https://codepen.io/anon/pen/oWaWYL" rel="nofollow noreferrer">https://codepen.io/anon/pen/oWaWYL</a>. When I clicked on Image with lib transit image go up. But I need to see image into the circle </p>
  
  <p>Html</p>
  
  <pre><code> &lt;body&gt;
       &lt;div id="del-countdown"&gt; 
        &lt;div id="screen"&gt;&lt;/div&gt;
        &lt;div id="clock"&gt;&lt;/div&gt;
  
        &lt;div id="units"&gt;
          &lt;span&gt;Hours&lt;/span&gt;
          &lt;span&gt;Minutes&lt;/span&gt;
          &lt;span&gt;Seconds&lt;/span&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* { margin:0; padding:0; box-sizing:border-box; }
  body {
    background: #282e3a;
    font-family: Ubuntu, sans-serif;
  }
  
  h1 {
    color: #fff;
    text-align: center;
    font-size: 74px;
    letter-spacing: 10px;
    margin-bottom: 70px;
  }
  
  #del-countdown {
    width: 700px;
    height: 700px;
  
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
  
    /*background-color: rgba(255, 0, 0, 0.3) ;*/
  
    border-radius: 50%;
    border-style: solid;
    border-color: #0000ff;
    z-index: 0;
  
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  #clock,#units {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  #screen{
    width:100%;
    height:100%;
    position: absolute;
    overflow: hidden;
    background: url(https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=1000%C3%97700&amp;w=1000&amp;h=700) no-repeat center center fixed;
  }
  
  #clock span {
    float: left;
    text-align: center;
    font-size: 84px;
    margin: 0 2.5%;
    color: #fff;
    padding: 20px;
    width: 20%;
    border-radius: 20px;
    box-sizing: border-box;
  }
  #clock span:nth-child(1) {
    background: #fa5559;
  }
  #clock span:nth-child(2) {
    background: #26c2b9;
  }
  #clock span:nth-child(3) {
    background: #f6bc58;
  }
  
  #clock:after {
    content: '';
    display: block;
    clear: both;
  }
  
  #units span {
    float: left;
    width: 25%;
    text-align: center;
    margin-top: 30px;
    color: #ddd;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 1px rgba(10, 10, 10, 0.7);
  }
  
  
  span.turn {
    animation: turn 0.7s ease forwards;
  }
  
  @keyframes turn {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>"use strict";
  
  function updateTimer(deadline) {
    var time = deadline - new Date();
    return {
      hours: Math.floor(time / (1000 * 60 * 60) % 24),
      minutes: Math.floor(time / 1000 / 60 % 60),
      seconds: Math.floor(time / 1000 % 60),
      total: time
    };
  }
  
  function animateClock(span) {
    span.className = "turn";
    setTimeout(function () {
      span.className = "";
    }, 700);
  }
  
  function startTimer(id, deadline) {
    var timerInterval = setInterval(function () {
      var clock = document.getElementById(id);
      var timer = updateTimer(deadline);
  
      clock.innerHTML = "&lt;span&gt;" + timer.hours + "&lt;/span&gt;&lt;span&gt;" + timer.minutes + "&lt;/span&gt;&lt;span&gt;" + timer.seconds + "&lt;/span&gt;";
  
      var spans = clock.getElementsByTagName("span");
      animateClock(spans[2]);
  
      if (timer.seconds == 59){
          animateClock(spans[1]);
      }
  
      if (timer.minutes == 59 &amp;&amp; timer.seconds == 59){
          animateClock(spans[0]);
      }
  
      if (timer.total &lt; 1) {
        clearInterval(timerInterval);
        clock.innerHTML = "&lt;span&gt;0&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;";
      }
  
    }, 1000);
  }
  
  function hideOnLoad(clock, units){
    var c = document.getElementById(clock);
    var u = document.getElementById(units);
    c.style.visibility = 'hidden';
    u.style.visibility = 'hidden';
  }
  
  function clickStart(counter){
       var start = document.getElementById("del-countdown");
        start.addEventListener("click", function() {
          counter++;
          if(counter%2==0){
  
            $('#screen').transition({ y: '-500px' });
            var c = document.getElementById("clock");
            var u = document.getElementById("units");
            c.style.visibility = 'visible';
            u.style.visibility = 'visible';
          }else{
  
              $('#screen').transition({ y: '0px' });
               var c = document.getElementById("clock");
              var u = document.getElementById("units");
              c.style.visibility = 'hidden';
              u.style.visibility = 'hidden';
          }
        }, false);
  }
  
  window.onload = function () {
    var deadline = new Date("Jan 1, 2018 10:10:00");
    var counter = 1;
  
    hideOnLoad("clock", "units");
    clickStart(counter);
    startTimer("clock", deadline);
  };
  </code></pre>