Text that is superimposed onto an image

Struggling to implement a hovering text over an image? I attempted to follow a tutorial, but couldn't adapt it to my project. While I managed to create a fixed overlay, I aim for a responsive solution that adjusts with resolution changes. My goal is to have the overlay match the thumbnail size.

HTML:

  <div class="col-md-6 col-sm-2">
  {% for phone in phones %}
  <div class="llol col-md-8 col-md-2">
      <a href="{{ url_for('phones.phone', id=phone.id) }}" class="thumbnail">
        <img src="{{ url_for('static', filename='phone_pics/' + phone.image) }}" alt="" class="cus-img">
      {% if phone.stock == 0 %}
      <div class="overlayOUT">
          <div class="textOUT">OUT OF STOCK!</div>
      </div>

      </a>
      {% else %}
      </a>
      {% endif %}
      <p style="text-align: center;"><b>{{phone.brand.name}}</b> <span style="color: #006666;">{{phone.model}}</span><span class="badge">{{phone.stock}}</span></p>
  </div>
  {% endfor %}
</div> 

CSS:

    .thumbnail img{
    height:240px;
    width:100%; 
    }
    .overlayOUT{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: 15px;
    height: 250px;
    width: 183px;
    opacity: 0.8;}

    .textOUT{
    color: white;
    padding: auto;
    font-size: 20px;
    position: absolute;
    top: 48%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: #FA8072;  
    }

Answer №1

To hide the text, simply include the display: none; property within the .textOUT class

.textOUT{
    color: white;
    padding: auto;
    font-size: 20px;
    position: absolute;
    top: 48%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: #FA8072;  
    display: none;
}

You can also enhance the functionality by adding a hover effect using CSS. This may provide further assistance. Thank you.

.thumbnail:hover .textOUT{
    display: block;
}

Answer №2

If you want to make text appear over an image on hover, one easy way to achieve this is by creating a container that initially has 0 opacity for the text and then changing it to 1 on hover. Here's a simple example to demonstrate how this can be done.

The CSS classes used in this example include .container for positioning both the image and the hidden text container, and .text-container which is set to display the text on top of the image when hovered over.

.container {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 400px;
  height: 300px;
}

img {
  width: 100%;
  height: 100%;
}

.text-container {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  transition: all 0.4s ease-in-out 0s;
}

.text-container:hover {
  opacity: 1;
}

.text {
  text-align: center;
  position: relative;
  top: 50%;
}
<div class="container">
  <img src="https://www.example.com/image.jpg">
  <div class="text-container">
    <div class="text">Your Text Here</div>
  </div>
</div>

To explore more methods of overlaying text on images using CSS hover effects, check out this resource.

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

What is the best way to align content at the center on mobile using Bootstrap 5?

I'm struggling to center elements on mobile devices, even though they look fine on desktop. Desktop: https://i.sstatic.net/I6Rtf.png Mobile: https://i.sstatic.net/4a1zS.png Desired mobile: https://i.sstatic.net/uMrEa.png I am using Bootstrap 5.3 ...

A slender gap of white space delicately separates the transformed parent from its offspring

When trying to align a parent div with a child div that has the same background-color as the parent's border-color, I am encountering an issue. Despite my efforts, there seems to be a thin line of whitespace separating the two divs. It is worth notin ...

Is there a way to retrieve the values of a checkbox from a location outside the form where it is initially defined?

After successfully developing a script that deletes rows from a table when a checkbox is selected, I encountered an issue where the values of the checkboxes were not accessible outside of the form action they were placed in. The checkboxes and correspondin ...

Continue extending the footer as the screen size decreases

Could anyone offer some assistance? I'm currently working on a project and facing issues with getting the footer to always be pushed down as the screen size decreases. As of now, my content is going under the footer instead. Any help would be greatly ...

Align two separate unordered lists together in the center

Would it be possible to align two separate UL elements next to each other horizontally? Here is the code that I am currently working with: <div id="container"> <ul id="list1"> <li></li> <li></li> ...

Unable to modify the .top attribute style in elements within an arraylist using JavaScript

I need to align multiple images in DIVs on the same line by setting their Top value to match the first image in the array. Here is the code I am struggling with: (addBorder function is called when divs are clicked) <div class="DRAGGABLE ui-widget-cont ...

Guide to vertical centering of inline elements within an inline-block using HTML and CSS

Despite reading numerous resources and articles on vertical alignment/centering in HTML/CSS, I still can't seem to get my specific case working as expected. If you have a moment, please take a look at http://jsfiddle.net/pf29r/3/ <div class="oute ...

How to truncate lengthy text in a table on mobile screens using Bootstrap 4

I am currently working on a responsive table that needs to display correctly on both desktop and mobile devices. However, I have run into an issue where long text in the table gets truncated on mobile devices, compromising the responsiveness of the design. ...

How to Centre Align Items in a React Native ListView

Is there a way to center align the items in a ListView without using another View wrapping the ListView? Currently, all the items are left aligned. ListView Code Snippet <ListView dataSource={this.state.dataSource} renderRow={this.renderItem} ...

Attach a Material-UI Popper component to a customized edge label in a React Flow

After finding inspiration from this particular example in the react-flow documentation, I decided to create my own customized version. It showcases a Material Ui Popper that appears when the edge is selected. However, my problem arises when attempting to z ...

Attempting to incorporate Google charts into a div using jQuery's load function

Trying to incorporate a basic Google chart using jQuery .load functionality to transfer the chart into another webpage with a specific containing DIV: <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi">< ...

When should CSS compression and combining / JS minification be performed - at runtime or during build time?

I need to find a way to compress, version (for caching reasons), and possibly combine our JS and CSS files. I've come across two main approaches so far: 1) During the build process: Using an MSBuild task or similar. 2) Dynamically at runtime: Through ...

Using CSS to conceal an element when a different element is also invisible

My inquiry is as follows: I currently possess a code that conceals class element 1 when it possesses a specific value (which varies across different sites). Now, my objective is to also conceal class element 2 ONLY IF class element 1 is already hidden. ...

Is there a way to specifically remove only the last row from a table?

Recently, I encountered a problem with my JS code that adds and removes table rows based on user interaction. Adding rows functioned perfectly, but the issue arose when attempting to delete rows. Instead of deleting only the last row as intended, all rows ...

Unable to Scroll HTML Division

At the moment, I am working on a new website. I have a div where I place images and overlay text on them to describe the images. The issue I am facing is that the text does not scroll even though the scroll bar is visible. This is my HTML: <!DOCTY ...

What is the best way to establish anchors for *ngFor elements in Angular 2 and beyond?

I have a component that displays items using *ngFor. My goal is to scroll down to the element with anchor #3. Here's the code snippet: @Component({ selector: 'my-app', template: ` <button (click)="scroll(3)">scroll 2</butt ...

Preventing Canvas Image Disappearance with JavaScript's onload Event

My current issue involves adding an Image to my webpage. However, every time I hit the refresh button, the image disappears. After researching on Stack Overflow, it was suggested to include window.onload=yourDrawFunction() in the code. Despite following th ...

Use Javascript or Jquery to dynamically change the background color of cells in HTML tables based on their numerical

I am working with a collection of HTML tables that contain numbers presented in a specific style: <table border="1"> <tr> <th>Day</th> <th>Time</th> <th>A</th> <th>B</th> &l ...

Having trouble making SCSS mixins work with CSS variables in NextJS?

My current next.config.js setup looks like this: module.exports = (phase, {defaultConfig}) => { if ('sassOptions' in defaultConfig) { defaultConfig['sassOptions'] = { includePaths: ['./styles'], ...

Could someone shed some light on why hjk fails to print whenever I click?

Why is the code not printing 'hgk' every time I click? The debounce function should run and print 'hgk' each time the button is clicked. Can someone please explain why this is not happening? const debounce=(fn,delay)=>{ ...