Как я могу показать больше текста при наведении на div?

Question

Я работаю над веб-сайтом, чтобы показать еще немного текста при наведении. Вот живой фрагмент:

#democontent { 
 
    border: 1px solid #E0E0E0; 
 
    border-radius: 12px; 
 
    padding: 3%; 
 
    width: 80%; 
 
    height: 150px; 
 
} 
 
#imagecontent { 
 
    background-color: #E3E3E3; 
 
    border-radius: 12px; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 1.7% 2%; 
 
    width: 400px; 
 
    height: 150px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 
#imagecontent:hover { 
 
    overflow: visible; 
 
    white-space: normal; 
 
    width: 400px; 
 
    position: absolute; 
 
    height: auto; 
 
} 
 
#contentimage { 
 
    float: left; 
 
    margin: 0 1% 0 0; 
 
    width: 19%; 
 
}

<div id="democontent"> 
 
    <div id="contentimage"> 
 
    <img src="" /> 
 
    </div> 
 

 
    <div id="imagecontent"> 
 
    <ul class="bullet"> 
 
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</li> 
 
     <li>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue</li> 
 
     <li>mper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per</li> 
 
     <li>er inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.</li> 
 
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</li> 
 
     <li>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue</li> 
 
     <li>mper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per</li> 
 
     <li>er inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor.</li> 
 

 

 
    </ul> 
 
    </div> 
 

 
</div>

У меня есть изображение, и я хочу, чтобы сориентировать div стороны в сторону. Если я нахожусь над div, который имеет контент, он перекрывает изображение. Любая идея, как я могу это сделать без div, перекрывая изображение?

Answer 1

Try This

<style type="text/css"> 
    #democontent { 
     border: 1px solid #E0E0E0; 
     border-radius: 12px; 
     padding: 3%; 
     width: 80%; 
     height:150px; 
     overflow:hidden; 
    } 
    #imagecontent { 
     background-color: #E3E3E3; 
     border-radius: 12px; 
     float: left; 
     margin: 0; 
     padding: 1.7% 2%; 
     width: 400px; 
     height:150px; 
     overflow: hidden; 
     white-space: nowrap; 
     text-overflow: ellipsis; 

    } 

    #imagecontent:hover{ 
     width: 400px; 
     height:auto; 
    } 
    #contentimage { 
     float: left; 
     margin: 0 1% 0 0; 
     width: 19%; 
    } 
    </style>