"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

I am unable to get JQuery UI Dialog to open on my end

Coding in HTML: <button type="button" class="btn btn-success" style="margin-bottom:14px" id="btnAdd" onclick="modaladdedit('URLToMyController')"><i class="fa fa-plus"> Add New</i></button> HEAD Tag Setup: <link rel=" ...

javascriptjquery

What is the best way to troubleshoot a $http asynchronous request?

Is there a way to pause the program execution in AngularJS $http call after receiving a successful response? I've attempted to set a breakpoint at that point, but it does not halt the execution. I've also tried using the debugger directive, but ...

javascriptjqueryangularjs

Why isn't the JavaScript if statement working properly when checking the length?

Below is an if statement that I have devised: var TotalMoney=0; var Orbs=0; if (TotalMoney.length==2) { Orbs+=1; } The intention behind this code snippet is to increase the value of "Orbs" by 1 when the digit length of "TotalMoney" equals 2. However, it& ...

javascripthtmlcssif-statementconditional-statements

Looking to incorporate nested rules in `JSS` using `CSS`?

Can someone guide me on how to use CSS class-nesting in Material-UI or JSS in general? I have been attempting the following: card: { cardHeader:{ marginTop:"30px" } } ...

cssmaterial-uijss

Creating a dynamic full-width background image that adjusts its height according to the content: a step-by-step guide

Currently, I'm attempting to apply a background image to a webpage that spans 100% width in order to adjust to the viewport size. The method I am using involves placing an image directly after the body tag with the subsequent styling: img#background ...

cssbackgroundpositioningbackground-image

Using ReactJS to search for and replace strings within an array

A feature of my tool enables users to input a string into a textfield and then checks if any words in the input match with a predetermined array. If the user's string contains a specific name from the array, I aim to replace it with a hyperlink. I&a ...

javascripthtmlnode.jsreactjsjavascript-objects

Is it possible to utilize CSS rules for a non-existent div within CSS?

Can this be achieved using CSS? If .div1 is not present, enforce the following rule: .div2{ property: value; } For example, <div class="div1"> ... </div> <div class="div2"> <!-- it exists, so no action needed --> </div& ...

htmlcsscss-selectors

The beauty of crafting intricate forms with Angular's reactive nested

In my Angular project, I am exploring the concept of nesting multiple reactive forms within different components. For instance, I have a component called NameDescComponent that includes a form with two inputs - one for name and one for description, along ...

javascriptangulartypescriptangular-reactive-formsangular-forms

Creating a CSS Grid with Scroll Snap functionality to mimic an iPhone screen in HTML

I have created an iPhone simulator using HTML. It's in German, but I can provide a translation if needed: // JavaScript code for various functionalities related to the iPhone interface /* CSS styling for the iPhone interface */ <meta name="v ...

javascripthtmlcssscroll-snap

Is there a way to set up automatic switching to a minimized browser window when receiving an alert, even if you are currently using a different window like Outlook or Explorer?

Is there a way to automatically switch to a minimized browser window from a different program window (such as Outlook or Explorer) when an alert is received on a specific tab? I'm looking for a Javascript/Jquery solution. I've attempted the foll ...

javascriptjquery

Adjust hover effects based on true conditions

Currently working on a web app using HTML, CSS, JavaScript, and AngularJS. Progress so far includes a clickable box that triggers a javascript function to display more boxes upon click using ng-click. <div ng-click="!(clickEnabled)||myFunction(app)" cl ...

javascripthtmlcssangularjsangularjs-ng-click

Setting a minimum date limit for the daterangepicker

Is there a way to configure the daterangepicker to allow users to select a maximum of 60 days and a minimum of 10 days of dates? I have noticed that the dateLimit option only sets a limit on the total number of days selected, but not for a specific range b ...

jquerydaterangepickerbootstrap-daterangepicker

What is the best way to customize the appearance of a toggle switch using useStyles in Material UI, rather than withStyles?

I need help with customizing the styling of an input form switch in Material UI. I want the track and button to turn red when the switch is on, similar to this example. I have tried using the withStyles method following examples on the Material UI website, ...

cssreactjsmaterial-ui

Effective Ways to Transfer Input Parameters to Karate File using npm

I am working on a test script that runs a series of queries. In order to execute the file, I need specific inputs such as URL and authorization header, which will vary depending on the environment. How can I prompt the user for these inputs in the command ...

javascriptnpmkarate

Is there a way to assign innerHTML values to table cells using PHP?

I'm currently building a website that relies on a database to store information. I have created an array to hold the values retrieved from the database, and now I need to populate a table with these values. Each cell in the table has a numerical ID ra ...

javascriptphphtml

Strange CSS Problem: Button dysfunction in displays sized 13 inches or 15 inches

I have made a landing page using the latest version of bootstrap. However, I am encountering an odd issue where the success button is not clickable on certain devices such as 13-inch and 15-inch laptops and desktops. You can find the URL for the landing p ...

csstwitter-bootstrap-3screenscreen-resolution

Is JQuery the ultimate solution for creating a dynamic multi-language website?

Embarking on a new project that requires support for multiple languages. My plan is to create a jQuery/AJAX based application with all the code in jQuery, simply calling JSONs for data. What would be the most effective approach for implementing multi-lan ...

javascriptjqueryajaxjsoninternationalization

As I scroll past the top or bottom of the page, the body's background color transitions to a new shade

I am encountering an issue with my next.js app where the body background color is set to black. Here is the code in globals.css: body { background-color: black; padding: 0; margin: 0; font-family: 'Titillium Web', sans-serif; } However, ...

cssnext.jsbackgroundbackground-color

ScriptManager is not accessible in the current ASP.Net Core Razor Page context

I'm facing an issue where I have a view (such as Index.cshtml) and a page model (like Index.cshtml.cs). In the view, there's a JavaScript function that I want to call from the OnPost() method in the page model. I tried using ScriptManager for thi ...

javascriptc#htmlasp.net-corerazor-pages

The removal of an object becomes unsuccessful when objects with lower indices have been deleted beforehand

Attempting to construct a multi-layer object representing a program; check out my progress here http://codepen.io/Irish1/pen/lbjdw Imagine adding 3 weeks, each with 3 days, and each day having 3 sessions. Removing these objects is feasible as long as caut ...

javascriptjsonangularjs