How do I create inline block elements that take up 100% width. The second element has another element that shows on hover

Question

I have an unordered list of images with a text overlay at the bottom of each image. The text overlay are inline blocks with different background color.

First I get a whitespace in between the background colors which I do not need. ✔️

Secondly, the left inline block has a fixed width while the right needs to cover up the remaining width ✔️

Thirdly, the second block should have another element which is hidden and ought to show on hover

Lastly I want the two blocks to have an even height at all times when the height of either of them changes

EDIT Paragraph div needs to show on hover. Also I want the height of the inline blocks to come out even whenever either of them changes.

This is what I have so far

 .slideList { width: 100%; } .slideList li { position:relative; } .slideList .service-highlight { position: absolute; color: white; bottom: 0; left: 0; right:0 } .slideList .service-highlight p { display: inline-block; color: white; font-size: 18px; font-weight: bold; } .slideList .service-highlight .services-box{ text-align: center; background-color: #003768; width: 200px; font-weight: bold; float: left; } .slideList .service-highlight .services-detail{ background-color: #0088ff; width:calc(100% - 200px); float: left; padding-left: 5px; } .slideList .hide-description { display: none; font-weight:normal; } .slideList .hide-description p { font-weight:normal; padding-top: 10px 5px 10px; } .services-detail:hover + .hide-description { display: block; position: absolute; } .clearFloat { clear: both; } 

 <ul class="slideList"> <li data-transition="fade"> <img src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" > <div class="service-highlight"> <p class="services-box">SOME SERVICE:</p> <div class="services-detail"> <p>Some headline</p> <div class="hide-description"> <p>Some text that appears here. Text describes some service I intend to achieve. This may or may not take up to three lines maybe two </p> </div> </div> </div> </li> <ul> 

Answer 1

1 & 2) The white space can be removed by simply floating .services-box & .service-highlight to the left, and then set the fixed width to .service-box and give a percentage width to .service-highlight .

3) To achieve this, you need to use :hover . However, take note you can't put it on the same line because when you hover, the hidden box appear, and since your mouse is on it, the mouse is on the new box, so it loses its :hover effect and goes back to the original state, thus it will make it blink. So put that new display box above to avoid this.

Hope this helped!

 .slideList { width: 100%; } .slideList li { position:relative; } .slideList .service-highlight { position: absolute; color: white; bottom: 0; left: 0; right:0 } .slideList .service-highlight p { display: inline-block; color: white; font-size: 18px; font-weight: bold; } .slideList .service-highlight .services-box{ text-align: center; background-color: #003768; width: 200px; font-weight: bold; float: left; } .slideList .service-highlight .services-detail{ background-color: #0088ff; width:calc(100% - 202px); float: left; } .slideList .hide-description { display: none; } .services-detail:hover + .hide-description { display: block; position: absolute; bottom: 50px; } .clearFloat { clear: both; } 

 <ul class="slideList"> <li data-transition="fade"> <img src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" > <div class="service-highlight"> <p class="services-box">SOME SERVICES:</p> <p class="services-detail">Service headline detail</p> <div class="hide-description"> <!-- Div should be a continuation of .services-detail --> <p>A more detailed description of services. This should appear here. In about 3 sentences and at least three lines long</p> </div> <div class="clearFloat"></div> </div> </li> <ul> 

UPDATE 2:

From the reference you linked, that is hover on box and not the text. I've changed the markup abit, please take a look now:

 * { margin: 0; padding: 0; } .slideList { width: 100%; height: 550px; background-image: url("https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"); background-repeat: no-repeat; background-size: cover; position: relative; } .slideList ul { list-style: none; } .service-highlight { position: absolute; bottom: 0; width: 100%; } .services-box { text-align: center; background-color: #003768; width: 200px; font-weight: bold; float: left; } .services-detail { background-color: #0088ff; width: calc(100% - 200px); float: left; } .hide-description { display: none; } .slideList:hover .hide-description { display: block; position: absolute; bottom: 0px; background-color: #0088ff; } .clearFloat { clear: both; } 

 <ul class="slideList"> <li data-transition="fade"> <div class="service-highlight"> <p class="services-box">SOME SERVICES:</p> <p class="services-detail">Service headline detail</p> <div class="hide-description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam animi accusamus officia accusantium quaerat distinctio, omnis neque adipisci! Rerum nemo vitae necessitatibus autem fugit ipsam in nam asperiores. Eius, vitae. </div> <div class="clearFloat"></div> </div> </li> <ul>