Salvo Onofrio Salvo Onofrio - 18 days ago 7
CSS Question

Carousel caption

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

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>