JSFiddle - React, Tailwind, and code Playground

by Kleofáš Hatlapatka

HTML

<body>

<div id="scroll">

<p>Vzorový text, které se bude zobrazovat po najetí myší. zorový text, které se bude zobrazovat po najetí myší. zorový text, které se bude zobrazovat po najetí myší. zorový text, které se bude zobrazovat po najetí myší.</p>

 <div id="round"> 
</div>  
</div>

<div id="kolo"></div>


</body>

CSS

#round
{
  position:absolute;
  margin: -200px 400px;
  width:100px;
  height:100px;
  background-color:blue;
  border-radius:50%; 
}


#scroll
{
margin:150px auto;
padding-left:10px;
padding-right:10px;
border-radius:15px 15px;
width:500px;
height:5px;
background:red;
transition:height 3s;
-webkit-transition:height 3s; /* Safari */
text-align:justify;
overflow-y:hidden;
}

#scroll:hover
{

height:300px;

}


#kolo
{
 
  margin:150px auto;
  width:300px;
  height:150px;
  background:green;
}