Is there a way to generate inline block elements that occupy the full 100% width? Furthermore, can the second element contain an additional element that is revealed upon

Currently, I am working on a project that involves displaying images with text overlays. The text overlays are designed as inline blocks with varying background colors.

One issue I encountered is that there is unwanted whitespace between the background colors that needs to be removed. ✔️

Additionally, I need the left inline block to have a fixed width, while the right block should extend to cover the remaining width of the container ✔️

Another requirement is for the second block to reveal an additional element on hover.

Lastly, I aim to ensure that both blocks maintain an equal height even if one block's height changes.

UPDATE The paragraph division should be visible on hover. Also, I want the heights of the inline blocks to remain consistent at all times, regardless of any changes.

This is the code I have developed 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>

htmlcss

Answer №1

One and Two) Eliminate the white space by floating the elements .services-box and .service-highlight to the left, setting a fixed width for .service-box, and assigning a percentage width to .service-highlight.

Three) Use :hover to achieve this effect. Avoid placing it on the same line, as hovering triggers the hidden box to appear, causing the mouse to move to the new box and lose the hover effect. To prevent this, display the new box above.

Hopefully, this explanation was helpful!

.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:

Based on the reference provided regarding hovering on the box rather than the text, some modifications have been made to the markup. Please review the changes below:

* {
  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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I dynamically assign a className in a React component based on the current state when importing styles?

I've been utilizing the style-loader to insert CSS modularly into my components ({style.exampleClassName}). My goal is to showcase a loader for a specific duration before displaying an image (at least 16 of these components in a grid layout). This i ...

javascriptcssreactjsreduxmodular

Instructions on how to extract a specific timestamp from a video and utilize it to initiate an event

Is there a way to trigger an event or animation at a specific time in a video or frame of the video? For instance, I want text to appear when a video reaches 30 seconds. I've experimented with currentTime, tried using loadeddata, and attempted to u ...

javascripthtmlaframe

How can you align square cells within a container using CSS grids while maintaining a consistent grid gap?

Our objective is to perfectly align square cells with the edges of their container while maintaining a consistent gap between cells in each row and column. Although this Codepen solution is close, there are two key issues: (1) vertical spacing doesn' ...

htmlcsscss-grid

Having trouble displaying the fancybox helper buttons

I had everything working perfectly, but suddenly it stopped and I can't figure out what went wrong. I just need the left, right arrows, and helper buttons to appear when fancybox is open. Any assistance would be greatly appreciated. PS: All the neces ...

jqueryhtmlfancybox

What is the reason behind genNewColor function's malfunction?

I'm having trouble with this code that is supposed to generate a random color. The CSS formatting works perfectly, but I suspect there might be an issue with the function itself. When I try to run the code, it doesn't produce any error messages ...

javascripthtmlcss

Align a div to the center horizontally at the top of the screen

Is there a way to vertically center text within a div and also horizontally center the div at the top of the screen? Visit this link for more details <div id='custom'> example text </div> #custom{ width: 50%; background: #FF00 ...

htmlcss

Unbelievable attribute: sup causing peculiar styling in link element

We've recently come across an issue where the text-decoration of an underline in an anchor tag appears strange when there is a sup element present. The visual glitch looks like this: https://i.sstatic.net/X2Yqg.png For reference, here's the HTML ...

htmlcss

Utilize the Bootstrap column push-pull feature on the mobile version of

https://i.stack.imgur.com/yTBIt.png When viewing the desktop version, div A is displayed at the top of the page. However, I would like to move it to the bottom when viewing on a mobile device (col-xs). I have attempted to solve this issue myself without s ...

javascripthtmltwitter-bootstrapcss

Adjust the size of the text only when there is limited space available

Is there a way to make text shrink to fit inside a container only if it's too long, but remain the same size otherwise? I'm working on a chart with keyboard commands overlaid on an image of a keyboard and want the text to adjust dynamically. Any ...

htmlfont-size

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

cssgridviewyii2

How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

Currently, I am developing an extension and using a template from a previous YouTube video that is based on manifest v2. However, I am implementing manifest v3 in my extension. Can anyone guide me on how to update this specific piece of code? "backgro ...

javascriptcssjsonchrome-extension-manifest-v3

Can I customize the color of an SVG image with CSS (jQuery SVG image substitution)?

This is my innovative solution for easily embedding and styling SVG images using CSS. Traditionally, accessing and manipulating SVG elements with CSS has been a challenge without the use of complex JS frameworks. My method simplifies this process, making ...

jquerycsssvg

Matching multiple divs with different ids in PHP using preg_match_all and regex

I have an HTML page structured like this: <!DOCTYPE html> <html> .... <body> <div class="list-news fl pt10 "> Blue </div> <div class="list-news fl pt1 ...

phpjqueryhtmlcssregex

Signs that indicate a socket has truly disconnected

socket.on('disconnect') isn't behaving as I anticipated. I want to be able to track when a user leaves my website completely, not just switches pages. Currently, navigating to a different route on my webpage triggers the socket disconnect ev ...

htmlnode.jsexpresssocket.io

Enhance your AngularJS table with a custom Javascript context menu!

In the process of developing a shift planner, I have implemented a JS context menu and am attempting to display the shifts using Angular. However, upon clicking any table cell, all cells are being updated simultaneously. Is there a workaround for this issu ...

javascriptjqueryhtmlcssangularjs

Replacing text within nested elements

I am facing an issue with replacing certain elements on my webpage. The element in question looks like this: <div id="product-123"> <h3>${Title}</h3> <div> ${Description} </div> <div> ${P ...

javascriptjqueryhtmlregexjson

Why use getElementById(id) to obtain an element in JavaScript when it already exists in the JS?

Recently, I have observed that a reference to an HTML element with an id can be easily accessed in JavaScript by using a variable named after that id (jsbin). What is the reason for this behavior? Why do we need to use getElementById(id) when we could sim ...

javascripthtmldom

What steps do I need to take to link my form with Ajax and successfully submit it?

Here is my HTML code: {% extends 'base.html' %} {% block content %} <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create a Recipe ...

javascripthtmlajax

Firefox users may notice that the pop-up video player appears in unusual locations on their screen

I'm encountering an issue with a pop-up video player that is triggered by an "onClick" event in HTML elements. The problem arises when there are multiple video players on the same page - in Firefox, the first video loads at the bottom of the page, req ...

javascriptcsspopup

Creating a fixed top bar button in Ionic and iOS along with a scrollable list

In my app using Ionic with the iOS platform, I am trying to achieve a specific layout: A header A fixed bar button A scrollable list Here is what I have attempted so far: <ion-view view-title="Account"> <div class="button-bar" style="margin ...

ioscssionic-framework