What is the best way to include interactive text on an image?

Just starting to learn html and could use some quick guidance. I have this image here: https://i.sstatic.net/kBJEk.png

I would like to place clickable text on the image that links to different pages when clicked, similar to this example: https://i.sstatic.net/jthJJ.png

How can I add clickable text over an image and change the font color when hovering the cursor over it?

Your help with this is greatly appreciated. I am struggling to understand how to overlay items on top of images.

Thanks

EDIT:

I am attempting to add clickable links using: 

<a href="google.com">Text</a
> But I am having trouble positioning it so it appears under the image like this: https://i.sstatic.net/vwgmn.png

This is my current code snippet:

<div class="container">
  <img src="https://growingseedsavers.org/content/images/2021/11/asd.png" alt="Snow">
</div>
<body>
<a href="google.com">Text</a>

</body>
htmlcss

Answer №1

Utilizing a single image as a background and harnessing the power of modern CSS features, you have the ability to overlay various elements on top of it.

Below is a demonstration showcasing the use of flexbox, grid layout, aspect ratio, and background properties. This setup allows for wrapping and the addition of multiple boxes as needed.

TEXT

  • CT
  • CT
  • CT
  • CT

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

Guide on how to have two controllers execute identical tasks in Angular while modifying the appearance of the website

Trying to recreate Google's homepage functionality using Angular has been challenging for me. Despite watching Egghead videos and studying the API extensively, I couldn't find a specific example for this behavior. Here's what I aim to achiev ...

javascripthtmlangularjssingle-page-application

What's the best way to utilize a navigation bar across various pages?

I have just completed designing my home/index.html page. I want to ensure that the navigation bar remains in place and visible as users navigate through all of my pages. Do I need to manually copy and paste the navigation code into the top of each page? Or ...

htmlnavbar

What could be the reason for this JavaScript malfunctioning in both Chrome and Safari browsers?

Why is it that the javascript works fine in Firefox for the gallery on the page below, but doesn't seem to be functioning properly in Chrome and Safari? In Chrome, the big image isn't displaying but the thumbnails are, and in Safari nothing show ...

javascriptcssgoogle-chromesafari

Sending information to a server using JavaScript

Greetings everyone, this is my first time posting here and I would appreciate detailed guidance in your comments. Just a little background about myself: I am a second-year college student with one year of Python training. I only recently started learning ...

javascriptjqueryhtmlcanvas

Is there a way to navigate through div text within a stationary container?

My current challenge involves a container that contains an overflow of text, but I desire for the container to remain fixed. The dilemma arises when the text spills out from both the top and bottom edges of the container. Instead of using scroll bars withi ...

jquerycssparallax

HTML & CSS: Modify background rectangle behind text to limit its size within the webpage dimensions

I'm experiencing a unique issue with the current code present in my HTML index file. <div class="titleMessage"> <div class="heading"> <p class="main">NAME HERE</p> <p class="sub">Software Engineer& ...

htmlcsstextbackgroundelement

The CSS specificity of a nested HTML element with no explicitly defined styles

Seeking clarification on this specific CSS cascading/inheritance rule. In the given example, I would have expected the text inside the em tag to be colored #000000, but I was informed that it would actually be colored #ff0000. I am familiar with CSS speci ...

csscss-selectors

Expanding the height of an image in a multi-select dropdown using CSS

I have an image that is included in all text fields and drop downs like so: However, when it comes to a multiple select drop down box, the image appears differently: I would like the image to display as shown above for multiple select drop downs. I atte ...

htmlcss

"Encountering an Ajax error 419 when using radio buttons and a form

I'm attempting to use AJAX to send radio button values to a Laravel route when a button is clicked, but I keep receiving error code 419 even though I am sending the CSRF token. $(document).ready(function(){ $("#valor").on('click' ...

htmlajaxlaravel

- Customizing the width of each dropdown level in a unique way

Working on a customized menu design that you can view live at: Focusing on the third level menu, I encountered an issue where all menus have the same width due to sharing the dropdown-menu class. While I understand the root cause of the problem, I am unsu ...

jqueryhtmlcsstwitter-bootstrap-3dotnetnuke

Guide on How to Show Only the Initial Word of an H2 Header Using JavaScript or CSS

Is there a way to display only the first word from an h2 heading? For instance: In the website's source code, it would appear like this <h2> Stackoverflow is an Ideal Place</h2> But on the live website, it should be displayed like this ...

javascripthtmlcss

The functionality of `config.assets.debug = true` fails to

I've encountered an issue with the configuration on development where config.assets.debug = true doesn't seem to work correctly. Instead of having multiple separate JavaScript and CSS file inclusions, I'm getting a consolidated one: <li ...

javascriptcssruby-on-rails

css - flexible div height based on content

Issue encountered: In my website, I have a dynamically generated content inside a specific div. On the left side of the provided URL, you can see the current appearance of the div. It is worth noticing that the height of the container div (mainContent_mid ...

htmlcssfrontend

Is it possible to perform a PHP redirect after the headers have been

I am encountering an issue with a function that needs to redirect the page once a variable is set. The challenge arises from the fact that this function is located at the bottom of the PHP page. As a result, I have already displayed a significant amount ...

phpjavascripthtml

Embracing the HTML5 Approach to iframes

My question pertains to iframes - I am looking to apply styling to the contents of an iframe using only CSS within the srcdoc attribute. <iframe name="myFrame" srcdoc="<span>Hi</span>"> </iframe> Is it feasible to style the span e ...

csshtmliframe

Issues with the functionality of jQuery append and AngularJS ng-if not functioning

In my application using checkboxes, I control the visibility of charts with the ng-if directive and implement drag-and-drop functionality with angular-Dragula. The use of ng-if is essential for me as it allows me to manipulate visible div IDs and organize ...

javascriptjqueryhtmlangularjs

Struggling to use the innerHTML method to update a div within another div element?

<!DOCTYPE html> <html> <head> <title>Business Information Card</title> <script type="text/javascript"> window.onload = init; function init(){ var button = document.getElementById("populate ...

javascripthtmldominnerhtml

CSS/HTML - Issue with nested divs not displaying properly

Attached is an image that provides context for the issue I'm facing. https://i.stack.imgur.com/nQXh8.jpg I'm encountering difficulties with styling a nested div element. When double-clicking the text within this div, only half of it gets highlig ...

htmlcssdjango

Master the art of filtering rows in an HTML table based on a select option when the mouse is clicked

I am trying to create a table that displays only the rows selected in a dropdown menu. Here is an example: If "All" is selected, the table should display all rows. If "2017" is selected, the table should display only the rows that have "2017" in the sec ...

javascriptjqueryhtml

What is the best way to show and hide text by toggling a link instead of a button?

I need help with toggling between two different texts when a link is clicked. I know how to achieve this with a button in JQuery, but I'm not sure how to do it with a link. <h1>Queries and Responses</h1> <p>Query: What is the larges ...

javascriptjqueryhtml