Tips for wrapping text in an image overlay

Currently immersed in a school project, I find myself at the initial stages of developing a product page. Employing an image overlay to display a product description on hover, however, I am encountering an issue where the text overflows beyond the container. Any insights or suggestions would be greatly appreciated. Thank you!

    .container2 {
      position: relative;
      width: 15%;
      height: 15%;
      margin-left: 50px;
        
    }
    
    .image {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .overlay {
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0;
      background-color: #4CAF50;
      overflow: hidden;
      width: 100%;
      height:0;
      transition: .5s ease;
    }
    
    .container2:hover .overlay {
      bottom: 0;
      height: 100%;
    }
    
    .text {
      white-space: nowrap; 
      color: white;
      font-size: 20px;
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    
    
    .container {
        overflow: hidden;
    }
    .column2 {
        float: center;
        margin: 20px;
        background-color: #333;
        padding-bottom: 100%;
        margin-bottom: -100%;
        color: aliceblue;
        font-family: roboto;
    }
    
    .column1 {
        text-align: center;
        float: center;
        margin: 20px;
        background-color: #333;
        padding-bottom: 100%;
        margin-bottom: -100%;
        color:aliceblue;
        font-family: roboto;
    }
    
    
    br {
        text-align: center;
    }
    
    
    
    a {
        text-decoration: none;
    }
    
    
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: fixed;
        top: 0;
        width: 100%;
    }
    
    li {
        float: left;
    }
    
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover:not(.active) {
        background-color: #111;
    }
    
    li {
        color: darkgreen;
        font-size: 20px;
        font-weight: bold;
    }
    .active {
        background-color: #4CAF50;
    }
<!DOCTYPE html>
<html>

<head>
<title>Shopping Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" type="image/png" href="images/favicongreen.png" />

</head>


<body>

<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a class="active" href="products.html">Products</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="cart.html">Shopping Cart</a>
</li>
<li>
<img src="images/bolt2.png" width="40px" height="40px" />
</li>

</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Products</h1>



<div class="container">

<div class="column1">
<br>
<br>
<p>
<b>Electric Energy Electronics Product Index</b>
</p>
<br>


<div class="container2">
<img src="images/solar.jpg" alt="Avatar" class="image" height="50px" width="50px">
<div class="overlay">
<div class="text">250PX Solar Panel
<br> This solar panel is a great way to harness clean energy from the sun.</div>
</div>


</div>

<div class="column2">
Shopping cart Div

</div>

</div>

</div>

</body>

</html>

Answer №1

Revamp your .text CSS class with the following updates.

    .text {
  width: 70%;
  text-align: center;
  color: black;
  font-size: 18px;
  position: relative;
  overflow: visible;
  top: 60%;
  left: 40%;
  transform: translate(-40%, -60%);
  -ms-transform: translate(30%, -20%);
}

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

Present information from a list in a table format

My webpage contains a single table where I want to showcase an image in row1 along with its details. As each image is displayed, its corresponding details are added to a list. There are a total of 27 images spread across 9 rows in the table. Once all the ...

Show the name of the current user in a WordPress form using a readonly input field

How can I display the logged-in WordPress username (display name) in a form input field that is set to readonly? I have already checked out the Function Reference/wp get current user, but haven't had any success with it. Take a look at the code snip ...

Incorporating Copyleaks SDK into Angular: A Seamless Integration

Currently, I'm in the process of implementing the Copyleaks SDK with Angular to conduct plagiarism checks on two text area fields within an HTML form. Within the form, my goal is to incorporate two buttons: one to check for plagiarism on one text area ...

"Is there a way to implement a sequence of fadeIn() followed by fadeOut() and then insertAfter

I have created a simple div fade cycle. Some of the divs are within an outer div, which is then placed in another outer div. I've written a script that cycles through these divs by fading them in and out. However, there seems to be a problem - the div ...

reduce input to 2 characters using jQuery

Is there a way to trim the input text down to just the first two characters when a button is clicked? For example, if I enter "BT2J43" into the input field, can it be automatically shortened to "BT" upon clicking the button? I'm new to learning jQue ...

The HTML file seems to be having trouble connecting to the JavaScript file

I am currently working on a small, fun website project and have an HTML file along with a JavaScript file in the same directory. However, my HTML seems to be unaware of the existence of my JavaScript file. It fails to execute the function during the load e ...

Rendering basic HTML in a React component

As I experiment with the react-draft-wysiwyg editor, my progress has been steady. However, I have hit a roadblock when it comes to displaying the output of the editor. For instance, let's say the body is the output of the wysiwyg editor: function Sh ...

What is the best way to move the Grid upward when the above content is not visible?

Let me demonstrate what I have been working on. Currently, I am creating a weather application to explore the functionalities of https://material-ui.com/. I am attempting to prototype an animation inspired by Google Flights, which can be seen here: https: ...

My jQuery plugin crashes when I delete the line with '.css({display: 'none'})'

Currently, I am utilizing a jquery plugin that replaces the file input of a form with a div. This allows for the file browser to pop up when the div is clicked. Upon selecting a file, the form is automatically submitted and the results are loaded into a hi ...

What could be causing the width of my aside not to display as I intended?

I've successfully used Flex multiple times in the past, but for some reason, I'm encountering an issue now. I isolated the problematic code in a separate HTML file, yet the problem persists. In my layout, I have a container div with an aside and ...

The attempt to update a div element in HTML using an Ajax function was unsuccessful

My attempt to showcase the search results of my webpage below the search area was unsuccessful. I utilized AJAX to present the outcome in a div, but encountered issues. I have three key components: the div, the search result page, and the AJAX function. ...

Set the element's text color to match the placeholder color specific to each browser

Can CSS be used to dynamically set the font color of a custom element to match the default input placeholder color of the current browser/OS? Thank you. ...

Is there a way to show an alert indicating the location of the element that was clicked on the screen?

Here is an example I am working on: link HTML CODE: <ul> <li id="#bar"> <img src="http://theimageconference.org/wp-content/uploads/2014/01/images-50x50.png"width=50 height=50></img> <p>ELEMENT 1</p&g ...

The images on the carousel fail to load unless I adjust the window size

After investing countless hours into finding a solution, I am still unable to resolve this issue. The problem lies within my use of a Carousel and setting the images through a javascript file. Strangely enough, upon loading the page, only the first image ...

Fixed position toolbar within a container positioned beside a dynamically sized sidebar navigation

I'm trying to figure out how to create a fixed toolbar that fills the remaining width of the page when a side nav is collapsible. Setting the width to 100% causes it to overflow the page due to the dynamic nature of the side nav. Using calc() isn&apos ...

This content consists of a header, footer, and middle section with an unknown height, allowing

I am attempting to create a webpage with a header and footer div of unknown height (or minimum height) and a scrollable middle content when the content increases. The challenge is to ensure that all three sections fit within the screen. I have tried the f ...

Location tracking functions only operational when using the local host

I managed to successfully integrate geo-location on my website while testing it on localhost. But, when I uploaded the website to an online server, I encountered a problem. I started receiving a bool(false) error message. Geo.php <?php class G ...

Having trouble accessing a website that is embedded within an iframe, and experiencing issues with several ajax post requests not functioning properly within the iframe specifically on Chrome

I am currently dealing with a situation where I have two distinct websites, (constructed with PHP) and (also a PHP site). To integrate them, I have embedded site1 inside site2 using an iframe. <iframe src="https://site1.com" seamless width= ...

How can I resolve the "web page not found" error when using jQuery .replace()?

Working on HTML and javascript/jquery scripts, I have encountered a peculiar issue. My script utilizes a for-in loop to iterate through a JavaScript object, substituting specific patterns in HTML-formatted lines with data from the object using jQuery .appe ...

Include content within the navigation bar of Bootstrap 3.3

I am trying to insert text at the end of the header in a jumbotron template: <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text ...