Carousel caption - css

Question

I have this little carousel that moves on mousehover
http://jsfiddle.net/dpn3t9p6/1/
HTML
<div id ="container">
<div id="parent">
<div class="contentBlock">
<img alt="Les Bourdelles Des Garcons" src="http://www.deblasiis.com/wp-content/uploads/2016/10/MG_4194-copia-3.png">
<p class="bsubtitle11"><span>Les Bourdelles des Garcons</span></p>
</div>
<div class="contentBlock"><img alt="Religio Universalis" src="http://www.deblasiis.com/wp-content/uploads/2016/11/MG_7877-dOUBLE.jpg"></div>
<div class="contentBlock"><img alt="Isal Bed Ollen" src="http://www.deblasiis.com/wp-content/uploads/2016/11/01-N-1.jpg"></div>
</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'><</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>></span>
CSS
#container {
width:600px;
overflow:hidden;
}
#parent {
width:6000px;
}
.contentBlock {
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
.contentBlock img {
height:600px;
width:auto;
}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active {
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
JS
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
I want a text caption over the image. I can't figure it out, in my tests (https://jsfiddle.net/g5vakqw5/2/) caption will always follow the movement of carousel and won't stay adherent to the image.
Thank you for your time and help

Answer 1

You just need to make the position of the contentBlock relative. See here your jsfiddle
.contentBlock {
position: relative; // <---- here is the change
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
(function () {
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
}());
#container {
width:1980px;
overflow:hidden;
}
#parent {
width:2532px;
}
.contentBlock {
position: relative;
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
.contentBlock img {
height: 850px;
width:auto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.contentBlock:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active {
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
.bsubtitle11 {
font-weight:300;
font-size:35px;
text-align:center;
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 45%;
width: auto;
opacity: 1;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.contentBlock:hover .bsubtitle11 {
opacity: 1;
}
.bsubtitle11 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="container">
<div id="parent">
<div class="contentBlock">
<img alt="Les Bourdelles Des Garcons" src="http://www.deblasiis.com/wp-content/uploads/2016/10/MG_4194-copia-3.png">
<p class="bsubtitle11"><span>Les Bourdelles des Garcons</span></p>
</div>
<div class="contentBlock"><img alt="Religio Universalis" src="http://www.deblasiis.com/wp-content/uploads/2016/11/MG_7877-dOUBLE.jpg"></div>
<div class="contentBlock"><img alt="Isal Bed Ollen" src="http://www.deblasiis.com/wp-content/uploads/2016/11/01-N-1.jpg"></div>
</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'><</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>></span>

Answer 2

If you want The text to be fixed and not me with image carousel, Then create one seprate tag add your text and make it position: absolute.
Use top and left values to place it properly over the image:
CSS:
#container {
width:600px;
overflow:hidden;
position: relative:
}
#container p {
position: absolute;
top: 50px;
left: 50px;
font-size: 24px;
font-weight: bold;
}
JS FIDDLE LINK