JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<div class='div'>
    <div class='item'>
        <div class='item-1'>
            Visible text
        </div>
        <div class='item-2'>
            Hidden text
        </div>
    </div></div>

CSS

div.div {
   height: 300px;
    width: 50px;
    border: 1px solid black;
    float:left;
    margin:5px;



}

div.div:hover {
   height: 300px;
    width: 300px;
}

div.div, p{
    position:absolute;
    background-color:white;
}
.item .item-1, .item .item-2{
    position:absolute;
    background-color:white;
}
.item .item-2{
    display:none;
}
.item:hover .item-2{display:block;}
http://stackoverflow.com/questions/9168264/css-to-expand-hide-content-on-hover