Sliding out widget on hover - html

Question

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
My actual code:
<div class="col-md-4 box_industries">
<div>
<div class="image fill">
O nas
</div>
<div class="content">
<h5>O nas</h5>
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.
</div>
</div>
</div>
.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%;
}

Answer 1

Try to use CSS :hover Selector. Example: div:hover {top: 100px;} but it will be work only when mouse still over the element, or you can change the top using JS: document.getElementById("elem").style.top = "100px"; but if cursor goes out the element it will be having a top 100px (not past value);

Answer 2

Here's what I'd do - use simple hover effects as ch1puha mentions, add some transition duration. I've put together an example for you: https://jsfiddle.net/59tvxe2f/
<div id="container">
<div class="circle">
<h2>HOVER ME</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
/* Globals */
html, body {height:100%; margin:0; padding:0;}
* {box-sizing: border-box;}
#container {
padding:20px;
}
.circle {
margin:0 auto;
height:200px;
width:200px;
background-color:red;
border-radius:100px;
transition:300ms;
text-align:center;
color:white;
font-family:Arial, sans-serif;
font-size:20px;
}
.circle:hover {
height:500px;
transition:300ms;
}
.circle:hover > h2{
padding-top:75px;
transition:300ms;
}
.circle:hover > p{
opacity:1;
transition:300ms;
}
h2 {padding-top:85px; transition:300ms;}
p {font-size:16px;padding:20px; opacity:0; transition:300ms;}