Tips for showing text on top of a responsive image using CSS

I am working on a layout with 4 columns, each containing images of different sizes followed by a hover effect with an absolutely positioned mask.

The width of the mask is currently exceeding the width of the images.

Is there a way to ensure that the mask always matches the width of the image?

Link to Example

HTML

<div class="wrap"><div class="row">
  <div class="col-1-4">
     <div class="show show-first">
        <img src="http://placehold.it/100X200" />
        <div class="mask">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
        </div>
     </div>
  </div>
  <div class="col-1-4">
     <div class="show show-first">
        <img src="http://placehold.it/120X200" />
        <div class="mask">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
        </div>
     </div>
  </div>
  <div class="col-1-4">
     <div class="show show-first">
        <img src="http://placehold.it/150X200" />
        <div class="mask">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
        </div>
     </div>
  </div>
  <div class="col-1-4">
     <div class="show show-first">
        <img src="http://placehold.it/180X200" />
        <div class="mask">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
        </div>
     </div>
  </div>

CSS

* {  box-sizing: border-box; }
.wrap{
  width: 87%;
  margin: auto;
  padding: 0 10px;
  background-color: rgba(255,255,255,0.9);
  overflow: hidden;
  box-shadow: 0 0 5px #eee;
}
img{
  max-width: 100%;
  height: auto; 
}
[class*='col-']{
  float:left;   
}
.col-1-3{
  width: 33.33%;
  padding: 20px;
} 
.col-2-3{
  width: 66.66%; 
  padding: 20px;
}
.col-1-4{
  width: 25%; 
  padding: 10px;
}
.show{
  width:100%;
  height: 100%;
  border: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #fff;
  display: block;
  border-radius: 4px;
}
.show .mask{
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}
.show-first .mask {
  opacity: 0;
  background-color: rgba(0,0,0, 0.4);
  transition: all 0.4s ease-in-out;
}
.show-first:hover .mask {
  opacity: 1;
}
@media only screen and (max-width: 767px){
  .col-1-4{
    width: 50%; 
    padding: 10px;
    overflow: hidden;
    clear: right;
  }
  .wrap{
    width: 100%;
    margin: auto;
    overflow: hidden;
  }
  .mobile-clear{
    clear:both;
  }
}
htmlcssresponsive-design

Answer №1

Wrap the content with a div:

<div class="show show-first">
  <div class="mask-wrapper">
    <img src="http://placehold.it/100X200" />

    <div class="mask">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
    </div>
  </div>
</div>

Next, adjust the CSS rules as follows:

.mask-wrapper: {
  position: relative;
  display: inline-block;
}

.show {
  text-align: center;
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

img {
    max-width: 100%; // Consider converting this into a separate class for easier styling
}

Answer №2

Resolved Answer

To improve the layout, you can make the following changes:

width: 100%;

can be removed and replaced with

display: block;

which should be updated to

display: inline-block

for <div class="show">. Additionally, for center alignment of the <div class="show">s, include

text-align: center;

within <div class="col-1-4">.

Implementation Example:

* {
  box-sizing: border-box;
}
.wrap{
  width: 87%;
  margin: auto;
  padding: 0 10px;
  background-color: rgba(255,255,255,0.9);
  overflow: hidden;
  box-shadow: 0 0 5px #eee;
}
img{
  max-width: 100%;
  height: auto;
}
[class*='col-']{
  float:left;   
}
.col-1-3{
  width: 33.33%;
  padding: 20px;
}
.col-2-3{
  width: 66.66%; 
  padding: 20px;
}
.col-1-4{
  width: 25%; 
  padding: 10px;
  text-align: center;
}
.show{
  height: 100%;
  border: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #fff;
  display: inline-block;
  border-radius: 4px;
}
.show .mask{
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0
}
.show-first .mask {
  opacity: 0;
  background-color: rgba(0,0,0, 0.4);
  transition: all 0.4s ease-in-out;
}
.show-first:hover .mask {
  opacity: 1;
}
@media only screen and (max-width: 767px) { 
  .col-1-4{
    width: 50%; 
    padding: 10px;
    overflow: hidden;
    clear: right;
  }
  .wrap{
    width: 100%;
    margin: auto;
    overflow: hidden;
  }
  .mobile-clear{
    clear:both;
  }
}
<div class="wrap">
<div class="row">
  <div class="col-1-4">
    <div class="show show-first">
      <img src="http://placehold.it/100X200" />
      <div class="mask">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
      </div>
    </div>
  </div>
   <div class="col-1-4">
    <div class="show show-first">
      <img src="http://placehold.it/120X200" />
      <div class="mask">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
      </div>
    </div>
  </div><div class="col-1-4">
    <div class="show show-first">
      <img src="http://placehold.it/150X200" />
      <div class="mask">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
      </div>
    </div>
  </div><div class="col-1-4">
    <div class="show show-first">
      <img src="http://placehold.it/180X200" />

      <div class="mask">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
      </div>
    </div>
  </div>
</div> 
</div>

Answer №3

Give this code a try:

 $('.display').hover(function(){
   var imageWidth = $(this).find('img').width();
    //alert(getimg);
     $('.overlay').css({'width':imageWidth})

  });

For a demonstration, check out this Example

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 translate these JQuery functions into vanilla JavaScript?

I am currently in the process of building a configurator using transparent images. The image configurator functions through a basic JQuery function: I have assigned each input element a data attribute called data-Image. This function identifies the data-Im ...

javascriptjqueryhtmlcss

Create a stunning MUI App bar with a blurred effect below a fixed Navbar

Is there a method to apply a blur effect to the background of my material-ui AppBar component, creating a visually appealing overlay below the fixed navbar? I have experimented with using filter: blur(0) but it does not achieve the desired result. I am lo ...

javascriptcssreactjsmaterial-uistyled-components

Tips on expanding the content of a page all the way to the bottom of

Currently, I am facing an issue while working on a Joomla site where I am struggling to extend a page to the bottom of the screen. Attached is an image of the page: and below is the HTML code for the page: <div id="free_trial_page"> <div id="f ...

htmlcss

Edit: "Submit a binary file with just JavaScript"

I am currently developing a Chrome application that utilizes the HTML5 Filesystem API to enable users to import and synchronize files. A challenge I'm facing is when attempting to sync image files, as they appear to become corrupted during the upload ...

javascriptajaxhtmlgoogle-chromemootools

Adjusting the properties of a <span> tag when hovering over a different element

Query: I am trying to dynamically change the color of the span element with classes glyphicon and glyphicon-play when the user hovers over the entire element. How can I achieve this? Recommendation: .whole:hover > span.glyphicon.glyphicon-play { c ...

csshover

Vertical Alignment of Navigation Bar in Bootstrap 4

I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below. <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> ...

htmlcssbootstrap-4navbarcenter

Table pagination in Mat is experiencing overflow, and the button styles have also been customized for a unique look

I implemented a mat paginator feature, however, I am facing an issue where the alignment of items per page options is not correct. Below is the snippet from component.html file: <div class="table-responsive" *ngIf="resultssummaries"> &l ...

cssangularcss-selectorsangular-material

Can an input element be used to showcase a chosen image on the screen?

I would like to display the selected image from an input element. Can this be done with a local file, accessing the image on the client side, or do I need to upload it to a server? Here is my React code attempt: I can retrieve the correct file name from t ...

javascripthtmlreactjs

Django redirects to an alternative template instead of the default one

After renaming my login.html file to login1.html instead of deleting it, I have been using Django-registration and Django-registration-views from Github. However, despite this change, Django continues to call registration/login1.html. Is there a way for me ...

pythonhtmldjango

Utilizing the Command Line/Window feature within Visual Studio Code

As a newcomer to Visual Studio Code, I'm currently using the latest Version: 1.29.1. When I used Matlab, I had access to a script window for writing code, a Command Window for testing code snippets and viewing variable values, as well as a workspace ...

javascripthtmlcssvisual-studiovisual-studio-code

Is there a more effective method for concealing arrows while scrolling?

I'm attempting to conceal the arrow that appears above the selected header, as depicted below. https://i.stack.imgur.com/wyxdF.png While scrolling, I aim to hide the arrow that appears on the header Company, especially when the first column is sticky ...

htmlcsshtml-tablescroll

Enhance Your Vue.js 2.0 Experience: Implementing Vue Components Generated with v-html and Compiling the Markup

Currently Utilizing VueJS 2.0 I am looking to transform the following into a clickable link. Is this possible? This is my vue component: <template> <div v-html="markup"></div> </template> <script> new Vue({ data() { ...

javascripthtmlmvvmecmascript-6vue.js

Dividing the z-index by half of the shape

I am trying to achieve the following shape: https://i.stack.imgur.com/Lr9gv.png So far, I have attempted the following code. How can I combine these elements together? .clal-loader{ display:flex; } .clal-loader div{ border: 10px solid #38477e; b ...

htmlcsscss-shapes

How can I organize a dictionary based on a specified key order in Jinja2?

Suppose I need to showcase the following data: • b is foo • a is bar • c is baz ...however, my dataset is structured like this (or any other sequence due to JSON's flexibility): { "a": "bar", "b": "foo", "c": "baz" } How can I utilize Jinja2 ...

pythonhtmldjangojinja2

List the acceptable favicon formats for Internet Explorer version 10 and above

When I say type, I'm referring to the file extension. My favicon displays correctly in Firefox, Chrome, and Safari, but someone suggested that the issue may be related to the favicon type. Is there a reliable online resource where I can find informa ...

htmlinternet-explorerfavicon

Retrieving specific value from a Parent Controller in AngularJS using UI Router

I have a request to display the value stored in $scope.resAVal on my index.html page. This value is accessible within the RootCtrl. index.html <!DOCTYPE html> <html ng-app="plunker"> <head> <!-- any required JavaScript librarie ...

javascripthtmlangularjsangular-ui-routerangularjs-controller

After logging in, I am unable to redirect to another PHP page as the login form simply reloads on the same page

Lately, I've encountered an issue that has persisted for a few days. The login validation is functioning flawlessly. However, the problem arises when attempting to redirect to another page, specifically 'index.php', after logging in. Instead ...

javascriptphpjqueryhtmlajax

What is the best method for displaying the toggle button for Drawer/Sidebar above the main content and appbar?

After reviewing Vatsal's suggestion, it appears that moving the toggle button above the drawer is the solution to our main issue. By taking advantage of the open state of the drawer, we can adjust the left property of the button in the toggleButton cl ...

cssreactjsmaterial-ui

In the middle of one div, there are two additional divs positioned nearby

I am facing a challenge with positioning three divs within one container. I want one to be on the right, another on the left, and the third one at the center, but so far I have not been successful; <div id="durum3" style="width: 100%; height: calc(10 ...

htmlcss

Creating a series of spots arranged in a semi-transparent line using JavaScript for a unique canvas

My attempt at creating a highlighter is encountering issues with transparency The problem might be due to using lineCap=round, resulting in multiple dark spots appearing in a single line (which shouldn't happen). It's difficult to fully describe ...

javascripthtmlhtml5-canvas