Is there a way for me to have an image smoothly ascend as the caption rises?

Question

Is there a way for me to have an image smoothly ascend as the caption rises?

I have put together the following html snippet: http://jsfiddle.net/4gDMK/ Everything is working smoothly, but I am struggling to figure out how to simultaneously move both the captions and the image upwards so that the entire image is no longer visible.

Below is the basic html code:

<figure>
    <img src="http://4.bp.blogspot.com/_1vc-O2P4PHQ/S1bI97AgDoI/AAAAAAAACxs/MOo533hzeSw/s200/technical_stockphoto2.jpg" alt="Stockphoto 1" />
    <figcaption>Caption text</figcaption>
</figure>

For reference, check out this website for an example: On certain blocks, you can click, which then reveals the caption and moves the image upwards. This is what I am aiming for, but on hover instead of click.

If anyone has insight on how to achieve this effect, please let me know!

Best regards

jquery html css

Answer 1

Answer №1

Alright, brace yourself for a lot of changes coming up.

Let's simplify the CSS to this (since all effects will be handled by JQuery):

figure {
    display: block;
    position: relative;
    float: left;
    width:200px;
    height: 200px;
    overflow: hidden;
    margin: 20px;
}
figure img {
    display: block;
    max-width:200px;
}
figcaption {
    position: absolute;
    background: black;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 10px 20px;
    width:160px;
}

This setup ensures that the caption remains hidden beneath the image until it is ready to be displayed.

Now onto the JavaScript:

//Credit goes to roXon
$(function(){
    $('figure').on('mouseenter mouseleave', function( e ){
        var toPos = e.type=="mouseenter" ? $('figcaption',this).innerHeight() : 0 ;
        $('img', this).stop().animate({marginTop: -toPos}, 200);
    });
});

When hovering over any figure, the caption below it expands in height, revealing itself and covering the top part of the image. Moving the cursor away resets the margin back to 0.

Updated fiddle link: http://jsfiddle.net/NkXCd/1/

Opting for CSS3 instead of JQuery (suggested by roXon once again)

figure {
    display: block;
    position: relative;
    float: left;
    width:200px;
    height: 200px;
    overflow: hidden;
    margin: 20px;
}
figure img {
    display:block;
    max-width:200px;
    margin-top:0;
       -webkit-transition: 0.3s;
           transition: 0.3s;  
}
figcaption {
    position: absolute;
    background: black;
    background: rgba(0, 0, 0, 1);
    color: white;
    padding: 10px 20px;
    width:160px;
}

figure:hover img{
    margin-top:-40px;
}

CSS3 Fiddle link:http://jsfiddle.net/NkXCd/2/

Answer 2

Alright, brace yourself for a lot of changes coming up.

Let's simplify the CSS to this (since all effects will be handled by JQuery):

figure {
    display: block;
    position: relative;
    float: left;
    width:200px;
    height: 200px;
    overflow: hidden;
    margin: 20px;
}
figure img {
    display: block;
    max-width:200px;
}
figcaption {
    position: absolute;
    background: black;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 10px 20px;
    width:160px;
}

This setup ensures that the caption remains hidden beneath the image until it is ready to be displayed.

Now onto the JavaScript:

//Credit goes to roXon
$(function(){
    $('figure').on('mouseenter mouseleave', function( e ){
        var toPos = e.type=="mouseenter" ? $('figcaption',this).innerHeight() : 0 ;
        $('img', this).stop().animate({marginTop: -toPos}, 200);
    });
});

When hovering over any figure, the caption below it expands in height, revealing itself and covering the top part of the image. Moving the cursor away resets the margin back to 0.

Updated fiddle link: http://jsfiddle.net/NkXCd/1/

Opting for CSS3 instead of JQuery (suggested by roXon once again)

figure {
    display: block;
    position: relative;
    float: left;
    width:200px;
    height: 200px;
    overflow: hidden;
    margin: 20px;
}
figure img {
    display:block;
    max-width:200px;
    margin-top:0;
       -webkit-transition: 0.3s;
           transition: 0.3s;  
}
figcaption {
    position: absolute;
    background: black;
    background: rgba(0, 0, 0, 1);
    color: white;
    padding: 10px 20px;
    width:160px;
}

figure:hover img{
    margin-top:-40px;
}

CSS3 Fiddle link:http://jsfiddle.net/NkXCd/2/

Is there a way for me to have an image smoothly ascend as the caption rises?

Answer №1

Similar questions

I cannot locate the dropdown list anywhere

Steps to deactivate child rows in a Responsive Datatable using jQuery after pagination

"Enhancing your text input fields with the CKEditor jQuery plugin and

Exporting CSS file from css-loader in Webpack: A step-by-step guide

Unlocking two features with just a single tap

Toggle sideBar within an iFrame by implementing Media Queries

Tips on adjusting the font size of headers in a Vuetify v-data-table?

Why does this function execute even after clicking only one of the two keys when using jQuery?

Exploring the functionality of $.param in jQuery

Issue with Angular: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables such as Arrays

error: cannot parse data with Jquery, AJAx, and JSON

What is the best way to utilize toggle("slide") in order to reveal a message letter by letter?

What is the best way to ensure my responsive form is centered and aligned properly with all other elements on the page

Issue with Safari: Unable to trigger CSS :hover when tapping SVG element

Is there a way to direct back to the AJAX error function from the application_error in the

Pressing the dart key will alter the sprite's direction in a 2D game

Creating a Javascript countdown timer that does not involve displaying the

Ajax response values overlap

Tips for locating all events linked to a specific text box using JQUERY

Is it possible for you to simulate the shift key being pressed prior to the event execution?