Ways to display text when hovering over an image link

Despite trying various techniques recommended by fellow Stackoverflow users who faced similar issues, I still encountered a problem where the text appeared below the image even after applying the suggested methods to my code.

I also experimented with a method from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade but experienced the same outcome.

A custom CSS stylesheet was used in an attempt to style the HTML elements and structure the layout. However, despite defining specific properties for different classes and media queries, the desired result was not achieved as expected. Further adjustments and tweaking were required to properly align the elements on the page and resolve the issue of overlapping content.

htmlcssbootstrap-4

Answer №1

Your code seems to be functioning well when the screen width is 400px or less.

This success can be attributed to how you've applied the necessary styles within a media query:

@media only screen and (max-width: 400px) {

/* Here are the styles that affect text display */

}

Just a friendly reminder: Ensure to properly close your media queries as they were left open in the provided code snippet.

Answer №2

To create a text that appears relative to the location of an image link, you can use the following code:

#container .text {
  position:relative;
  bottom:30px;
  left:0px;
  visibility:hidden;
}

#container:hover .text {
  visibility:visible;
}
<div id="container">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>

It seems like you are trying to achieve a specific layout with this setup....

Answer №3

To make it easier for you, I have cleaned up the unnecessary code so you can see exactly what needs to be added. Essentially, when hovering over an element, we are changing the opacity of the .caption class to 1. The caption is absolutely positioned within the .wrapper and contains a <span> element with text inside.

.wrapper>a {
  position: relative;
  z-index: 0;
  display: block;
}

.wrapper>a>img {
  width: 100%;
}

.caption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s;
  color: white;
  background: rgba(0, 0, 255, 0.5);
  opacity: 0;
}

.caption>span {
  font-size: 48px;
}

.wrapper > a:hover .caption {
  opacity: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="col-md-6">
  <div class="wrapper">
    <a href="#">
      <div class='caption'>
        <span>Text on hover</span>
      </div>
      <img src="http://via.placeholder.com/350x150" />
    </a>
  </div>
</div>

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 ensure that the content on my webpage stays below the navbar, no matter the height of the

I've been working on my homepage layout and encountered an issue with positioning the content below the navbar, which is centered on the page. Every time I adjust the window height, the content shifts. How can I ensure that it stays fixed below the na ...

htmlcssresponsive-designscreen-orientation

Develop a personalized component featuring various sub-categories

Currently, I am in the process of implementing a data-table element using custom elements (web components). Each row in the table can contain different types of cells such as text, number, date, etc. For example: <my-table> <my-table-cell-te ...

htmlcssdomweb-componentcustom-element

What is the best way to arrange card-columns in a horizontal order?

My smart-scrolling list of cards uses the card-columns style, but I find it frustrating that they are ordered top to bottom like this: 1 4 7 2 5 8 3 6 9 This vertical ordering becomes impractical when dealing with a large number of items. When I have 50 ...

csstwitter-bootstrapbootstrap-4

Crafting a triangle's shape using user inputs and a button: a step-by-step guide

https://i.sstatic.net/EAvcU.png I recently created a form similar to the one shown above, but I omitted the triangles on the left and right sides. However, after implementing this feature, my form became static instead of adaptive (I specified sizes in pi ...

htmlcsscss-shapes

The Tab style in Mobile Angular UI does not get applied correctly when nested within an ng-repear

While working on a tabbed control with mobile-angular-ui (), I encountered an issue when trying to generate the tabs dynamically. Initially, everything looked good with the following code: <ul class="nav nav-tabs" ui-state='activeTab' ui-def ...

javascriptangularjshtml

Is getElementById() returning null?

I'm currently working on a JavaScript program that takes an image URL and displays it on the page by creating an <img> tag. This way, I can easily add multiple images to the page. Here is my code: <!DOCTYPE html> <html lang="en&quo ...

javascripthtmlimagesrccreateelement

Maintain original image file name when downloading

I have successfully created a download link containing a base 64 encoded image. The only issue is that I need to retain the original file name, which is dynamic and cannot be hardcoded. downloadImage: function(){ var image_url = document.getEleme ...

javascripthtml

Is there a way to delete highlighted text without using execCommand and changing the font color

With my current use of JavaScript, I am able to highlight or bold a selected text range successfully. However, I am unsure how to undo the bold and unhighlight the text if the button is clicked again and the selected range is already bolded or highlighted. ...

javascripthtmlcss

Disabling animations in Reactjs with CSSTransition and Group Transition

Currently, I am experimenting with REACTJS to build a basic app featuring Transitions. In my project file, I have imported CSSTransitions and Group Transition. However, when attempting to implement CSSTransition for specific news items, the animations are ...

javascriptcssreactjsreact-transition-group

Storing HTML elements in a database using jQuery's html() method

I have encountered a dilemma that has left me stumped after extensive online research. I have a dynamically generated webpage and need to save the entire appended body of the page to a database using PHP and MySQL. My current approach involves using the fo ...

javascriptphpjqueryhtmlmysql

What is the best way to ensure a div occupies the full height within a grid layout?

https://i.sstatic.net/awwxE.png Looking at the image provided, I am seeking a way to make the top left image occupy the entire height just like the neighboring div in the first row of the grid. Is there a way to achieve this? The desired outcome should b ...

htmlcssvue.jsvuejs3bootstrap-5

Can CSS Grid layout be used to generate a grid consisting of squares?

I'm trying to set up a grid with equal square dimensions, but I'm having trouble with it. I've explored CSS Grid as a possibility since I thought it allowed for the creation of squares of equal height and width within a grid layout. However, ...

cssresponsive-designcss-grid

What is the best way to wrap the countdown numbers with <span> tags?

I have implemented the following countdown script: var clock = document.getElementById("timeleft"), tdy = new Date(1494979200000); countdown.setLabels( '| <span class="time-label">second</span>| <span class="time-label">minute< ...

javascriptjqueryhtmlcountdownjs.js

Sending data when button is clicked from Google Apps Script to sidebar

I have been attempting to pass a list that includes both the start cell and end cell of the active range. I want to then assign each value from this list to separate input fields. document.getElementById("btn-get-range").addEventListener('click&apo ...

javascripthtmlgoogle-apps-script

Navigation Menu Spanning Across Full Width of All Screens

Hello! I am currently working on designing a responsive menu using HTML5 and CSS. My approach involves creating a navigation menu for desktop computers and implementing a checkbox with a label to reveal the responsive menu when needed. Here is the code s ...

csshtml

How to Perfectly Center a Div using CSS in Next.js (slightly off-center)

Despite scouring numerous StackOverflow questions, I haven't been able to find a solution that fits my specific issue. It seems like there might be a CSS attribute preventing the div from centering properly. Could utilizing flexbox help resolve this? ...

cssreactjsflexboxnext.js

Utilizing Python's Requests Library to Submit a Form without Specifying Input Names

My task is to perform a POST request using the Python Request module. However, I am facing an issue where the input I need to work with only has an id attribute and no name attribute. Most of the examples I have come across involve using the name attribute ...

pythonhtmlhttpweb-scrapingpython-requests

Display a notification to the user prior to reloading the page

I have created a code for logging attendance at work using a barcode reader. The user simply needs to scan their card with a barcode to register their attendance. let $scannerInput = $(".scanner-input"); $(document).ready(function(){ $scannerInput.focu ...

javascripthtmljson

Is it possible to refresh the chat-box using PHP?

I recently created a chat box application using PHP, but I'm facing an issue with its automatic reload functionality. Is there a way to implement auto-reload in PHP itself, or would it be better to restructure the system to utilize AJAX? Additionally, ...

phpjavascripthtmlajax

Exploring the world of AngularJS and delving into the

Lately, I've come across articles discussing Google's ability to now crawl websites and render CSS and Javascript. For example, Google themselves have talked about it in this article: My setup involves a single page application built with Angula ...

javascripthtmlangularjsseo