Cycle2: is it possible to place the caption above the image?

Question

The fiddle is here: http://jsfiddle.net/r4qyU/

This is a JQuery Cycle2 slideshow with tile effect. I can't figure out how to place the caption above the images. The slideshow has overflow: hidden style applied to it by the plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.com/min/jquery.cycle2.min.js"></script>
<script src="https://rawgithub.com/malsup/cycle2/master/jquery.cycle2.tile.js"></script>
<div class="my-wrapper">
    <div class="cycle-slideshow" data-cycle-fx="tileSlide" data-cycle-timeout=2000 data-cycle-caption-template="{{cycleTitle}}">
        <img src="http://jquery.malsup.com/cycle2/images/p1.jpg" data-cycle-title="Spring">
        <img src="http://jquery.malsup.com/cycle2/images/p2.jpg" data-cycle-title="Redwoods">
        <img src="http://jquery.malsup.com/cycle2/images/p3.jpg" data-cycle-title="Angle Island">
        <img src="http://jquery.malsup.com/cycle2/images/p4.jpg" data-cycle-title="Raquette Lake">
        <div class="cycle-caption"></div>            
    </div>
</div>

And css:

.my-wrapper {
    width: 700px;
    height: 500px;
    background: gray;
    padding: 10px;
    margin: auto;
}
.cycle-slideshow {
    width: 100%;
    margin-top: 100px;
}
.cycle-caption {
    background: rgba(0,0,0,.5);
    font-size: 70px;
    right: auto;
    height: 80px;
    line-height: 80px;
    width: 100%;
    top: -40px;
}

score 2 · Answer 1 · 2013-11-03T23:10:09.197

You did a good job everything was almost working!

I modified you're existing css in the following way:

.cycle-slideshow {
    width: 100%;
    margin-top: 100px;
    overflow: visible !important;
}

This was important. If I didn't do this, the text would be cut off because of overflow: hidden, because of the key bit of information you provided I added

overflow: visible !important; This effectively overrides any other style rule.

Then I used a position of absolute to get the .cycle-caption above the images see below:

.cycle-caption {
    background: rgba(0,0,0,.5);
    font-size: 70px;
    height: 80px;
    line-height: 80px;
    width: 100%;
    position: absolute; /* What I added */
    top: -80px; /* This needs to be set to the height of the .cycle-caption */
    left: 0; /* What I added */
}

Here is the updated jsFiddle for you, see if this is what you wanted.

After my solution, we ran into a problem, the animations will display outside of the container and obviously this is not what we want. The way I solved this problem was just to set a height to .cycle-slideshow of 185px here is an updated jsFiddle

The problem is, in your fiddle, the tiles are visible below the image when the animation takes place. This effect looks strange. It would be ok with e.g. fade effect (which doesn't animate any elements outside the borders of the main area), but I need tiles. — camcam, Nov 03 '13 at 22:56
Ahh I see, I solved you're problem just apply height: 188px; to .cycle-slideshow here is the updated jsFiddle will update answer in a few min. http://jsfiddle.net/r4qyU/5/ — , Nov 03 '13 at 23:08
The tiles drop down to the middle and are visible until the end of the animation. Then they all disappear. It's a different visual effect than original, where tiles disappear consecutively one by one. — camcam, Nov 04 '13 at 09:08

Cycle2: is it possible to place the caption above the image?

1 Answers1