JSFiddle - React, Tailwind, and code Playground

by José Carlos Malafaia

HTML

<body>
        <div id="header">
            <img src="http://goo.gl/ZIrfmg"/>
        </div>
        <div id="leftMenu"></div>
        <div id="rightMenu">
            <a href="http://www.facebook.com" target="_blank">
                    <div class="content" >
                    <span class="contentTitle">Titulo de Testeasdasdasdadsaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
                    <span class="contentParagraph"><strong>Texto de testekkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</span></p>
                    <div class="contentDiv"><img src="http://goo.gl/fLMJYB"/></div>
            </a>
            </div>
            <div class="content"></div>
            <div class="content"></div>
            <div class="content"></div>
        </div>
        <div id="footer">
            <div id="facebookLink">
                <img id="facebookImg" src="http://goo.gl/a1psYY"/>
            </div>
        </div>
    </body>

CSS

#wrap{
    height: 100%;
    width: 100%;
    
}

body{
    background: white;
}

#header{
    z-index: 1;
    margin-top: -8px;
    margin-left: -8px;
    width: 100%;
    height: 55px;
    position: fixed;
    background-color: red;
    padding-left: 10px;
    clear: both;
    font-family: Arial,cursive,sans-serif;
    display: block;
    padding-top: 5px;
    border-bottom: 5px solid #31648A;
}

#header img{
    height: 50px;
}

#leftMenu{
    margin-top: 87px;
    margin-left: -8px;
    float: left;
    
    min-height:  600px;
    width: 200px;
    padding-left: 10px;
    padding-top: 5px;
    font-family: Arial,cursive,sans-serif;
    font-size: 10px;
    display: inline;
    position: relative; 
}

#rightMenu{
    margin-top: 87px;
    display: inline;
    position: absolute;
    min-height: 605px;
    width:  60%;
    font-family: Arial,cursive,sans-serif;
    font-size: 10px;
    padding: 0px 0px 0px 0px;
    float: left;
    position: relative;
    border: 5px solid #696969;
}

#footer{
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 150px;
    margin-top: 10px;
    display: inline-block;
    margin-left: -8px;
    float: bottom;
}

.lists{
    font-size: 10px;
    font-family: Arial,cursive,sans-serif;
}

.content{
    display: block;
    width: 150px;
    height: 85px;
    opacity: 0.65;
    background-color: #CFCFCF;
    margin-bottom: 5px;
    margin-top: 5px;
    text-align: center;
    padding-top: 5px;
    transition: width .8s, opacity .5s;
    position: relative;
    overflow:hidden;
}

.contentParagraph{
    font-family: Arial,cursive,sans-serif;
    font-size: 15px;
    margin: auto;
    word-wrap: break-word;
    opacity: 0;
    display: inline;   
    z-index: 1;
}

.content:hover {
    width: 100%;
    opacity: 0.65;
}
/*.content:hover .contentParagraph {
    transition: opacity .5s;
    opacity:1;
    position: relative;
    display: inline-block;
}

.content:hover .contentTitle {
    transition: opacity .5s;
    opacity: 0;
  ...

JavaScript

$(document).ready(function() {
    $('.content').mouseenter(function() {
        $(this).find('.contentParagraph').fadeTo('fast',1);
        $(this).find('.contentTitle').hide();
   });
   $('.content').mouseleave(function() {
       $(this).find('.contentParagraph').hide();
       $(this).find('.contentTitle').fadeTo('fast', 1);
    });
});