如何将跨度插入图像

Question

My goal is insert <span> into <image> , but I don't know how. Similar effect is on page http://www.bulb.cz/cs/reference , but I don't want it on hover() but on click() . I want insert "data-title" into <span> and after that <span> show on <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');
});

Answer 1

Try this — http://jsfiddle.net/sergdenisov/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 i understand your question right, u can use next('span') to select span:

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

To have span floating over image, make span position:absolute , and container postion:relative

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