title: Sliding out widget on hover
body: <p>I want to make sliding out on hover widgets with text. I want to make semicircles with the main heading. When you hover on the semicircle, the text should appear. I am currently standing on it</p>
  <p><img src="https://i.stack.imgur.com/quRaA.jpg" alt="screen" /></p>
  <p>My actual code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;col-md-4 box_industries&quot;&gt;
   &lt;div&gt;
       &lt;div class=&quot;image fill&quot;&gt;
           O nas
       &lt;/div&gt;
       &lt;div class=&quot;content&quot;&gt;
           &lt;h5&gt;O nas&lt;/h5&gt;
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula auctor vulputate. Aenean massa lectus, tempor hendrerit faucibus eu, euismod sit amet lorem. Aliquam ante arcu, tempor id augue eget, tristique tincidunt ipsum. Phasellus dignissim eu nisl in commodo. Maecenas erat diam, tristique eu arcu vulputate, vehicula vulputate tellus.
       &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;  
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.box_industries
  {
    background: grey;
    overflow: hidden;
    text-align: center;
    position: relative;
    min-height:300px;
    border-radius:999px;
    color:#fff;
  }
  
  .box_industries .content
  {
    background: rgba( 0, 0, 0, 0.9 );
    bottom: -100%;
    color: #fff;
    height: 100%;
    left: 0%;
    text-align: center;
    position: absolute;
    transition: bottom 0.5s ease;
    width: 100%;
    font-size:14px;
  }
  .box_industries:hover .content
  {
    bottom: 0%;
  }
  </code></pre>