"Can you provide instructions on placing a span within an image

I am trying to figure out how to insert a <span> into an <image>, similar to the effect on the page . However, I do not want this effect to occur on hover(), but rather on click(). My goal is to insert "data-title" into the <span> and have it displayed on the <image>.

HTML:

 <div class="Fotogalery">   
 <img src="images/Thumb/1.jpg" data-title="Zdar"  /> 
 <img src="images/Thumb/2.jpg" data-title="Ahoj" />
 <img src="images/Thumb/3.jpg"  data-title="Cau"  />
 <img src="images/Thumb/4.jpg" data-title="KUK" />  
 <img src="images/Thumb/5.jpg" data-title="ohh" />  
 </div>

CSS:

.Foto{width: 25%;height:auto;float:left;box-sizing: border-box;}
.Gallery{position:relative;}
.Gallery span{position:absolute;z-index:999;}

Javascript:

$(".Fotogalery img").addClass("Foto");
$(".Foto").wrap( "<div class='Gallery'></div>" );
$(".Foto").after("<span></span>");
$(".Foto").click(function() {
    var a = $(this).data('title');
});
javascriptjqueryhtmlcss

Answer №1

Here is a helpful solution — http://jsfiddle.net/uniqueuser/p72jnbLt/5/:

JavaScript:

$('.Fotogalery img').addClass('Foto');
$('.Foto').wrap('<div class="Gallery"></div>');
$('.Foto').click(function () {
    var a = $(this).data('title');
    $(this).after('<span>' + a + '</span>');
});

CSS:

.Fotogalery {
    font-size: 0;
}

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

.Gallery {
    position: relative;
    display: inline-block;
    width: 25%;
}

.Gallery span {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    font-size: 16px;
}

Answer №2

If you are asking about selecting a span using next('span'), you can do so with the following code:

     $(".Foto").click(function() {
        var title = $(this).data('title');
        $(this).next('span').html(title);
  })

To make the span float over the image, set its position to absolute and the container's position to relative.

http://jsfiddle.net/gbg1vfLb/2/

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

Dynamically updating fields in PHP using jQuery's passed variable

In my web application, I have a selection of locker numbers available in a dropdown list that is populated from MYSQL/PHP. My goal is to display each locker's combination and location when a user selects a locker number from the dropdown list on the s ...

javascriptphpjquerymysqlajax

Check for non-null Sequelize Where conditions

Suppose I need to execute a select command using Sequelize with the condition: WHERE ID=2134 However, if the user does not provide an ID, then the WHERE clause should be omitted (as it is null). What is the best way to handle this situation in Sequelize ...

javascriptsqlnode.jsexpress

Am I making a mistake in my implementation of sending Socket.io messages to a designated room?

Upon a user joining, I alter their ID to a shortened random code. This change is made to utilize the id as a visible session ID on the front-end. I mention this to prevent confusion regarding non-standard socket IDs and their relation to potential issues. ...

javascriptnode.jssocket.io

Encountered an error while trying to create module kendo.directives using JSPM

I am attempting to integrate Kendo UI with Angular in order to utilize its pre-built UI widget directives. After running the command jspm install kendo-ui, I have successfully installed the package. In one of my files, I am importing jQuery, Angular, and ...

javascriptangularjskendo-uiecmascript-6jspm

Guide on integrating React with Node.js and HTML

I've tried various methods, searched on Google, and checked the official site, but nothing seems to work. The code only functions properly when I include it in the HTML file of node.js like this: <!DOCTYPE html> <html lang="en"& ...

javascripthtmlnode.jsreactjsexpress

The p-dialog lacks the proper styling and does not show or hide correctly

I am working on adding a feature where dragging and dropping an event in a calendar triggers a dialog box that requires the user to confirm if they want to postpone the event. However, I ran into an issue where the styling of my p-dialog is not defaulting ...

javascriptangulardialogmodal-dialogprimeng

Do I need to generate a sitemap for data retrieved from a database in NextJS?

I'm currently working with Prisma and NextJS to fetch data through dynamic routes. However, I am unsure about the functionality of SEO and sitemaps. Would it be necessary for me to generate a sitemap for each individual post such as /post/1? ...

javascriptreactjsnext.js

JS: Initiating a new keypress operation

When I press the Tab key, I want it to do something different instead of its default action. Specifically, I have a text box selected and I would like it to add spaces (essentially making the textarea behave like a text editor). How can I trigger this type ...

javascriptjqueryhtml

Update the existing code to incorporate icons into the column formatting

I'm seeking assistance from someone knowledgeable in JSON or coding as this is not my area of expertise. In my sharepoint online list, I have customized the display to show different colors based on the text content in each item. Now, I am looking to ...

javascriptjsonsharepoint-online

How can we simplify this React component to reduce its verbosity?

After creating a test project to delve into react, react-router and react-redux, I revisited the Settings.jsx file. Now, I am pondering on how to streamline it and reduce potential errors. import React, { Component } from "react"; import { connect } from ...

javascriptreactjsreact-redux

Is it recommended to apply a FLOAT attribute to DIV elements with a width of 100%?

Currently, I have a page with five stacked DIVs in a vertical layout. I am wondering if it is necessary to apply the FLOAT property to each DIV to adhere to good coding practices. It appears that there are no issues, such as re-wrapping, in any browser e ...

htmlcss-float

Creating and accessing a temporary binary file using Node Js

Challenge I have been working on integrating the Google Text To Speech (TTS) service to save a generated binary audio file to Google Cloud Storage (GCS). Considering that saving a local binary file in Firebase's Cloud Functions environment may not b ...

javascriptnode.jsgoogle-cloud-storagefirebase-storage

Create a duplicate of a div element, including all of its nested elements and associated events, using

Attempting to duplicate a div containing input fields but the event listeners are not functioning. Despite performing a deep copy in the following manner - let rows = document.querySelectorAll('.row'); let dupNode = rows[0].cloneNode(true); sh ...

javascripthtmlcss

Images displayed using jQuery do not fade into view

I have a collection of JSON image URLs that I am using to populate a div with a variety of images. Initially, the images are set at opacity 0 and should gradually fade in through a for loop. Here is the jQuery code snippet: $.ajax('http://example.co ...

jqueryhtmlcss

Hover over the text below to see an image appear in its place

I'm looking to swap out some text with an image when hovering over it, using basic HTML/CSS. NO: show the image below the text NO: display the text on top of the image NO: replace one image with another YES: replace the text with an image ...

htmlcss

Exploring the intricacies of node.js module 'config' and its configuration files default.json, production.json, and uncovering issues with a specific "Configuration property"

https://github.com/node-config/node-config Here is a quote from GitHub: To install in your app directory, follow these steps: $ npm install config $ mkdir config $ vi config/default.json" The overview explains the installation process and mention ...

javascriptnode.jsjsonexpressnode-config

Tips for avoiding redundant AJAX requests

Currently, I am working with JavaScript and not jQuery. Imagine a scenario where I have 3 users in my database [Kim, Ted, Box] and 3 buttons structured as follows: <button class="user">Kim</button> <button class="user">Ted</button> ...

javascriptajax

Is there a way to selectively add elements to the Promise.all() array based on certain conditions?

Here is the code snippet that I have written: I am aware that using the 'await' keyword inside a for-loop is not recommended. const booksNotBackedUp: number[] = []; for (let i = 0; i < usersBooks.length; i += 1) { const files = await ...

javascripttypescriptasync-awaitpromise

I am interested in extracting information from a website by utilizing PHP

Can data be scrapped from a website using PHP without the use of any external tools? I attempted with the following code, but it proved to be insufficient: <?php $url = 'http://www.example.com'; $output = file_get_contents($url); echo $output ...

phphtml

Is it possible to use velocity js to add a gradient color effect to text content?

Can I use velocity js to apply gradient color to text? I've looked at https://css-tricks.com/snippets/css/gradient-text/ My specific need is to dynamically add a changing gradient using js. Thank you in advance. ...

javascripthtmlcssvelocity.js