Adjust the font size to fit within the container

My webpage features a bootstrap 4 container with three columns that adjust on screen sizes above the md breakpoint (col-md-4).

Each column contains an img with the class img-fluid, and when hovered over, text description appears. I want this hover text to scale appropriately with the resizing of each image so it always fits perfectly on top of the image.

In my current attempt, as the images resize, the text overflows its container – I aim to prevent this by responsively resizing the text to fit the container.

I've experimented with fitty, which works well for normal text but doesn't quite achieve what I had hoped for with my hover text.

Could there be something incorrect in my approach, or is there a better way (preferably using existing Bootstrap 4 classes) to accomplish this?

// fitty('.fit');
fitty('#my_fit');

fitty('#fit1');
fitty('#fit2');
fitty('#fit3');
.hvrbox {
    position: relative;
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}
javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Do you want this to be the outcome? I have utilized media queries, so feel free to resize your browser window.

.hvrbox {
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.hvrbox .hvrbox-layer_top {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 350px;
  height: 350px;
  background: rgba(11, 11, 28, 0.71);
  color: #fff;
  -moz-transition: all 0.4s ease-in-out 0s;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -ms-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
  opacity: 1;
}

.hvrbox .hvrbox-text {
  width: 100%;
  display: inline-block;
}

.hvrbox .hvrbox-text_mobile {
  font-size: 15px;
  border-top: 1px solid rgb(179, 179, 179);
  /* for old browsers */
  border-top: 1px solid rgba(179, 179, 179, 0.7);
  margin-top: 5px;
  padding-top: 2px;
  display: none;
}

#fit1, #fit2, #fit3{
margin: 25px;
}

.hvrbox.active .hvrbox-text_mobile {
  display: block;
}

@media (max-width: 1199px){
#fit1, #fit2, #fit3{
margin-top: -35px;
font-size: 14px;
}
}

@media (max-width: 991px){
#fit1, #fit2, #fit3{
margin-top: -120px;
font-size: 10px;
}

}

@media (max-width: 767px){
#fit1, #fit2, #fit3{
margin-top: 0px;
font-size: 15px;
}

}

@media (max-width: 320px){
#fit1, #fit2, #fit3{
margin-top: -20px;
font-size: 14px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1 viewport-fit=cover">
  <meta http-equiv="content-type" content="text/html" />
  <title>Title</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!-- Font Awesome CSS -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  <!-- Custom CSS -->
  <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>


  <div class="container mt-5">
    <div class="row border">
      <div id='my_fit'>Hello World</div>
    </div>
  </div>

  <div class="container mt-5">
    <div class="row">
      <div class="col-md-4 mb-3 text-center">
        <div class="hvrbox zoom">
          <img src="https://pbs.twimg.com/profile_images/378800000601617732/9e87878ffdd67333ac8b81f9da22696a_400x400.jpeg" alt="person" class="img-fluid mx-auto d-block zoom" height="350" width="350">
          <div class="fit hvrbox-layer_top img-fluid d-flex align-items-center" width="350" height="350">
            <div class="fit" id="fit1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-4 mb-3 text-center">
        <div class="hvrbox zoom">

          <img src="https://pbs.twimg.com/profile_images/378800000601617732/9e87878ffdd67333ac8b81f9da22696a_400x400.jpeg" alt="person" class="img-fluid mx-auto d-block zoom" width="350" height="350">
          <div class="hvrbox-layer_top img-fluid d-flex align-items-center" width="350" height="350">
            <div class="hvrbox-text fit" id="fit2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-4 mb-3 text-center">
        <div class="hvrbox zoom">

          <img src="https://pbs.twimg.com/profile_images/378800000601617732/9e87878ffdd67333ac8b81f9da22696a_400x400.jpeg" alt="person" class="img-fluid mx-auto d-block zoom" width="350" height="350">
          <div class="hvrbox-layer_top img-fluid d-flex align-items-center fit" width="350" height="350">
            <div class="hvrbox-text fit" id="fit3">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
              quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="https://github.com/rikschennink/fitty/blob/gh-pages/dist/fitty.min.js"></script>

</body>

</html>

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

Ensure that the input remains below ten

My goal here is to ensure that the value in an input element is a non-zero digit (0<x<=9). Here's the HTML tag I'm using: <input type="number" class="cell"> I've experimented with various JavaScript solutions, but so far none h ...

javascriptjqueryhtml

JavaScript: Efficiently Sorting a Multidimensional Array

Here is the array that needs to be sorted based on the third item: const array = [ [1, "Convention Hall", "Mumbai", 10, "XYZ Company"], [2, "Auditorium", "Delhi", 10, "ABC Company"], [3, "CenterHall", "Bangalore", 10, "ZZZ Company"], ... ...

javascriptjquerysortingmultidimensional-array

Capable of generating an ajax URL parameter conditionally for utilization with jQuery Validate

I am having an issue with my jQuery validation script. What I am trying to achieve is this: when a user clicks the send button, the script will determine whether to execute an if or else statement based on the last portion of a string (isAdd). Subsequently ...

javascriptjqueryajaxjquery-validate

In order to use Vue3 with Vite, it is necessary to use kebab case tags for custom components, whereas Vue3 CLI allows the

I am working on a project using Vue3 with Vite (on Laravel) that has a Wiki.vue page which loads a "MyContent.vue" component. //On MyContent.vue: <template> <div>content component</div> </template> <script> export default ...

javascriptvue.jsvite

What are the best ways to optimize and capitalize on functionality in Electron.js?

After creating three custom buttons for the close, maximize, and minimize functions in Electron.js, I encountered an issue. While the close button is functioning properly, I am struggling with implementing the maximize and minimize buttons. In fact, I have ...

javascripthtmlcsselectron

CSS animation: Final position once the vertical text has finished scrolling

I have designed a CSS-animated headline with a leading word and three vertically-scrolling/fading statements to complete the sentence, inspired by the style used on careers.google.com. The animation runs through three cycles and stops, leaving the third st ...

htmlcsscss-animations

React Native: Troubleshooting Issue with Shallow Copying of Nested JSON Objects

I have a JSON structure with nested objects like this: {"name", "children": [JSON objects]}. I am attempting to add a new child to the object based on a variable path, which is an array of names. Strangely, my code works fine in the Ch ...

javascriptjsonreact-nativereferenceshallow-copy

I am looking to incorporate an HTML file into my JSON data

Is there a way to include an HTML file in my JSON by using the $.get() function or any alternative method? { "user": { "username": $.get('profile.html') } } ...

jqueryjsonhtmlfileload

Transform the look of an inactive hyperlink

Can the visual style of an HTML link be modified when it is disabled? For instance, by implementing something like this: a.disabled { color:#050; } <a class="disabled" disabled="disabled" href="#">Testing</a> The code snippet above appears ...

htmlcss

Configuring React classes for compilation within Play

After incorporating a basic React class into my Play project at /app/assets/js: var Question = React.createClass({ render: function() { return (<div> <p>{this.props.content}</p> <br> <p>{this.props.an ...

javascriptscalareactjsplayframework

Iterate over each item in the select and include a blank option if either of the elements is missing

Having trouble with 2 drop down menus, select1 and select2. I select item1 from select1 and then click the OK button. But when the selected index is 0 (first option), I want to loop through the items of both drop downs. If the elements at the same index ( ...

javascriptjquerydrop-down-menudropdownbox

Issue with alert not being triggered in browser when using HTML and JavaScript function

Just starting out with HTML and Javascript! I'm working on a simple program where users can input a card number, and the browser should indicate whether it is valid (between 13-16 digits) or not. The website looks great, but I'm not getting an ...

javascripthtmlfunctionreturnalert

Having difficulties accessing the properties of a dynamically created JSON object with ng-repeat functionality

Within an ng-repeat loop, I have implemented a radio button that assigns the entire person object to a scope variable as shown below: <li ng-repeat="person in people"> <label>{{person.name}} <input type="radio" ng-model="$parent.s ...

javascriptangularjsjson

Deleting elements from the DOM in Vue.js

Utilizing Vue.js (version 3.x), I am dynamically rendering components. <div v-for="(i, index) in fields" > <my-component :id="index" ></my-component> <span class="delete-icon" @click="removeFi ...

javascriptvue.jsdomvuejs3

Developing a vanilla JavaScript web component with distinct HTML and JavaScript files

As I delve into creating vanilla JS web-components, I am exploring methods to keep the template HTML separate from the JS file, ideally in a distinct HTML file. I have examined various implementations of native JS web-component setups found notably here, ...

javascripthtmlweb-componentnative-web-component

Remove the array element if the value is blank

I have an array with different objects, and I need to efficiently delete the entries where the name is empty, similar to the first and third object in the example below: var myArray = [ { "Name": "", "Value": "" }, { "Name": "aaa", "Value": "bbb" ...

javascriptjqueryarraysjsonobject

Issue encountered while trying to implement a recursive function for mapping through nested elements was not producing the

I am currently working on recursively mapping through an array of nested objects, where each object can potentially contain the same type of objects nested within them. For example: type TOption = { id: string; name: string; options?: TOption; } con ...

javascriptreactjs

What is the best way to position an <a> tag in the top right corner of a card using Bootstrap?

I own a card that features an image in the background. <div class="col-12 col-sm-8 col-md-6 col-lg-4 mt-4"> <div class="card"> <img class="card-img" style=" filter: brightness(75%);" src=& ...

htmlcssbootstrap-4

What is the process of retrieving data from a Nextjs API route during the build and deployment stages?

I'm currently facing an issue while trying to deploy my nextjs web app on vercel. Upon deployment, I encounter the following error: > Build error occurred FetchError: request to http://localhost:3000/api/products failed, reason: connect ECONNREFUS ...

javascriptreactjsapinext.jsvercel

Not all words are compatible with word-wrap, don't you think?!

I have a situation where I used the following CSS properties for a div: word-wrap: break-word; text-align: justify; When a single word is too long to fit within the width of the div, it wraps or breaks into multiple lines. However, if a second word with ...

javascripthtmlcss