Overlaying Text on Images with Hover Effect - Mobile-friendly Design

I wanted to add an overlay with text to my images using this amazing tutorial I found:

http://codepen.io/pdelsignore/pen/uqenH

Although it worked perfectly, I faced an issue due to having a responsive website. When trying to use a % as the width / height of the '.box' element, the image disappeared. It seems like only a fixed width (e.g., px) is supported, which doesn't allow for proper scaling.

.box {  
cursor: pointer;  
height: 250px;   
position: relative;  
overflow: hidden;  
width: 400px;
font-family: 'Open Sans', sans-serif;
}

If anyone has any suggestions or ideas on how to address this issue, please let me know! Thank you in advance!

javascriptjqueryhtmlcssresponsive-design

Answer №1

Consider experimenting with applying min-width and min-height.

min-width: 100%;
min-height: 100%;

Answer №2

When working on a live project, it is common to utilize responsive frameworks such as Bootstrap or Foundation. Therefore, there is no need to worry about making the design responsive using percentages, as the framework will take care of that automatically. In Bootstrap, for example, we typically employ the following structure:

<div class="row">
    <div class="col-md-4">
        <div class="box">  
            <img src="http://files.room1design.com/oldcity.jpg"/>  
            <div class="overbox">
                <div class="title overtext">
                    Walk This Way
                </div>
                <div class="tagline overtext">
                    Follow the path of stone, a road towards an ancient past
                </div>
            </div>
        </div>  <!-- End box -->
    </div>  <!-- End Col-4 -->
</div>  <!-- End row -->

Answer №3

In my opinion, the sizing of .box in terms of percentage depends on the height of its parent element. Without a specified height on the body, there is no point of reference for the percentages to work correctly. To resolve this issue, consider adding the following code snippet:

html, body {
    height:100%;
}

I have made some adjustments in this updated codepen to demonstrate how using percentages can be effective once the body has dimensions set.

Check out the revised version here.

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

Execute Validation Function on Every TextField and Radio Button

I'm new to Javascript and struggling to make my function work for both radio buttons and text fields. Here is the HTML code for the form: <form action="sendmail.php" method="post" name="cascader" onsubmit="prepareEventHandlers()" id="cascader"&g ...

javascriptarraysfunction

Utilizing Typescript to Inject Generics and Retrieve the Name of an ES6 Module

I am currently working on developing a versatile repository using: Typescript ES6 Angular 1.x However, I am facing challenges in determining the correct way to inject the Entity and retrieve its module name. The main reason for needing the name: I adh ...

javascriptangularjsgenericstypescriptecmascript-6

Errors in ajax are displayed only if the request fails, they are not shown if

I have been using a request form that was functioning properly until today when it suddenly stopped working correctly. Now, when I submit the form, any errors that occur are displayed on the screen and in the network. However, if the form is submitted with ...

jqueryajax

Error: Unable to access property 'fetch' of null (discord.js)

Hey there, I'm running into an issue where it's giving me an error saying that the property 'fetch' doesn't exist. I'm using the Replit database for a balance command in discord.js. You can see the error image here. Here is t ...

javascriptnode.jsdiscorddiscord.jsfetch

How can I code a div to automatically scroll to the top of the page?

I'm attempting to implement something similar in WordPress - I want a div containing an advertisement to initially start 300px down the page, then scroll up with the page until it reaches the top, and finally stay there if the user continues to scroll ...

javascriptjquerycsswordpress

Leveraging AJAX to send a form filled with dynamic content to multiple destinations

I have a hidden form that needs to be submitted to two different locations. The form is automatically filled using the .val method in jQuery. How can I write the ajax script to submit this form to two different locations? Is it possible to do this without ...

javascriptjqueryajaxforms

Manipulate the presence of THREE.Points in a three.r84 scene by adding or removing them

I recently upgraded from three.js version 71 to version 84 and encountered a problem with updating points in the scene. Previously, with THREE.PointCloud, it was simple to add and remove points as needed like so: function updatePoints(newData) { geom ...

javascriptthree.js

Discover the process of integrating PWA features into an Express web application

I'm currently in the process of integrating PWA into a web application. I've created a manifest.json file and added it to the head of my page, which is loading correctly. However, the service worker registered in my app.js doesn't seem to be ...

javascriptnode.jsexpressnpmprogressive-web-apps

Understanding MUI5 prop handling

Recently, I decided to experiment with Material UI 5 sx props just for fun. I encountered a bit of confusion while trying to replicate the behavior of the previous MUI 4 makeStyles function. Specifically, I was attempting to pass JSS classnames to sx props ...

cssreactjsmaterial-uijsssx

Show values in an angular template using an array

I want to showcase values of an array using *ngFor const blockData = [ {text: sampleText1, array: [val1]}, {text: sampleText2, array: [val2, dat2]}, {text: sampleText3, array: [val3, dat3]} ] <div *ngFor="let data of blockData"> ...

javascripthtmlangular

Personalizing the Styles of Bootstrap 4

Hello there! I found this helpful resource: Documentation I'm interested in: Customizing Bootstrap 4 by utilizing our pre-existing custom variables file and easily adjusting global CSS preferences with new $enable-* Sass variables. You can override a ...

csssassbootstrap-4

Tips for accessing a Java-based RESTful service using AJAX and jQuery

I'm completely new to using jQuery and I'm having trouble accessing Java-based web services through an AJAX call. This is the code snippet for my AJAX call: $.ajax({ type: "POST", url: apiURL, data: requestData, ...

jqueryajax

Issues with React-markdown, including malfunctioning gfm tables and various other difficulties

My journey to render markdown in react using the react-markdown library has hit a few bumps along the way. I've encountered 2 issues and have been pondering 1 question that remains unanswered: Upon implementing the remark-gfm plug-in, the tables fail ...

javascriptreactjsmarkdowngithub-flavored-markdownreact-markdown

Establish a placeholder for the selection filter on the columns of DataTables

Hello, I am currently using DataTables to display a list of 'Providers' on my website. One feature that I have enabled is the column filtering module, which adds 'select' boxes above each column for filtering purposes. However, I woul ...

jquerydatatablebootstrap-4datatables

How can I create a floating thumbnail gallery that displays extra content when hovered over? Is there a way to make the hovered thumbnail overlap its neighboring

I am currently working on a gallery of thumbnail images. Each image is accompanied by a title below it: <div class='gallery'> <div class='thumb'> <div class='thumbimage'></div> <div class ...

javascriptjquerycss

Struggling with making the image mobile-friendly

I'm having trouble making both the image and text responsive on mobile devices. Could there be an issue with the CSS code I'm using with Bootstrap 4? Here is the code snippet: HTML file <header class="masthead d-flex"> <div class="co ...

htmlcsswebbootstrap-4

Step by step guide on how to incorporate bootstrap.js, jQuery, and additional modules into an Angular2 application utilizing SystemJS

Struggling with loading and using downloaded node_modules in angular2, npm, and systemjs? Specifically, trying to load jQuery and bootstrap but encountering errors after modifying the systemjs setup. Let's solve this together... Error Messages: (i ...

javascriptnpmsystemjs

The CORS policy has prevented access to the script from origin 'null' error message appeared when attempting to load an HTML page utilizing an imported JavaScript function

While attempting to launch an HTML page using a JavaScript file that imported a function from another file, the following error occurred: The CORS policy blocked access to the script at 'file:///C:/Users/bla/Desktop/stuff/practice/jsPractice/funcexec ...

javascripthtmlvisual-studio-codeimport

JavaScript: utilizing JSON, implementing dynamic methods for creatures, and utilizing closures for encaps

Apologies for the unclear title, but I am unsure where the issue lies. Therefore, my task is to create a function that generates JavaScript objects from JSON and for fields that start with an underscore, it should create setters and getters. Here is an e ...

javascriptjson

Leveraging Node package within a NativeScript application

I've been diving into NativeScript and I'm eager to incorporate the Guid generator package from this repository into my app. However, I'm a bit lost on how to actually go about it. When examining the directory structure created by the comman ...

javascriptnativescript