How to slideToggle text over an image?

Question

I’ve written this code which works. Basically, when user hovers a image, a text appears over the image.

It’s a gallery so i need to use $(this).childrenin order to make the correct element to show.

What i don’t understand, i can’t make the h2 .nom_realisation slide toogle. I’ve tried a couple of things without success. I’m sure it’s pretty simple . If anyone can point me in the right direction ?

DEMO : http://jsfiddle.net/Vinyl/725hcc62/1/

CODE :

CSS

.hide {
    display : none;
}
.text {
    z-index:100;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    text-align: center;
    display: table;
    background: rgb(134, 0, 0);
    /* Fall-back for browsers that don't support rgba */
    background: rgba(134, 0, 0, .7);
}
h2.nom_realisation {
    color: #ffffff !important;
    font-family:'Oswald', sans-serif;
    font-size: 30px !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    display: table-cell;
    width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
    color: #ffffff !important;
    text-decoration: none;
}
.container_img img {
    position:absolute;
    left:0;
    top:0;
}
.container_img {
    height:232px;
    width:232px;
    position:relative;
}
.image_test {
    width:232px;
    height: auto;
}

HTML

<div class="container_img">
    <div class="container_nom_realisation hide">
        <div class="text">
             <h2 class="nom_realisation">Lorem ipsum</h2>

        </div>
    </div>
    <img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>

JavaScript / jQuery

(function ($) {

    $(document).ready(function () {


        $(".container_img").hover(function () {

            $(this).children('.container_nom_realisation').show('slow');
            $(this).children('.text').slideToggle('slow');

        }, function () {
            $(this).children("img").fadeTo(200, 1)
                .end().children(".text").hide();
            $(this).children('.container_nom_realisation').hide('slow');
            //.end().children(".hover").slideToggle("slow");

        });
    });

})(jQuery);

score 1 · Accepted Answer · answered Nov 18 '14 at 11:02

.nom_realisation is not a chid of .container_img, so you need .find() instead of children.
You are going to have trouble slide animating a table-cell element. Either don't display it this way or (because I assume you use table-cell for the vertical centre, have another element acting as table cell wrapping your <h2>:

HTML

<div class="container_img">
    <div class="container_nom_realisation hide">
        <div class="text">
            <div class='table-cell'>
                 <h2 class="nom_realisation">Lorem ipsum</h2>

            </div>
        </div>
    </div>
    <img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>

CSS

.hide {
    display : none;
}
.text {
    z-index:100;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    text-align: center;
    display: table;
    background: rgb(134, 0, 0);
    /* Fall-back for browsers that don't support rgba */
    background: rgba(134, 0, 0, .7);
}
.table-cell {
    vertical-align: middle;
    display: table-cell;
}
h2.nom_realisation {
    color: #ffffff !important;
    font-family:'Oswald', sans-serif;
    font-size: 30px !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
    color: #ffffff !important;
    text-decoration: none;
}
.container_img img {
    position:absolute;
    left:0;
    top:0;
}
.container_img {
    height:232px;
    width:232px;
    position:relative;
}
.image_test {
    width:232px;
    height: auto;
}

JavaScript

(function ($) {
    $(document).ready(function () {
        $(".container_img").hover(function () {
            $(this).children('.container_nom_realisation').show('slow');
            $(this).find('.nom_realisation').slideToggle('slow');
        }, function () {
            $(this).children("img").fadeTo(200, 1)
                .end().children(".text").hide();
            $(this).children('.container_nom_realisation').hide('slow');
            //.end().children(".hover").slideToggle("slow");
        });
    });
})(jQuery);

JSFiddle

@SébastienGicquel Glad to have helped. – George Nov 18 '14 at 11:17 — George, Nov 18 '14 at 11:17

score 1 · Answer 2 · answered Nov 18 '14 at 11:06

I do not know if that's what you want, but if it is what I'm thinking, you can do it with pure CSS...

<div class="container-img">
    <div class="image-title">LOREM IPSUM</div>
    <img class="image" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>

.container-img{
    position: relative;
    background: #cccccc;
    width: 230px;
    overflow: hidden;
}
.container-img .image-title{
    position: absolute;
    background: rgba(0,0,0,0.8);
    opacity: 0;
    margin: 0 auto;
    padding: 200px 0 0 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    color: #ffffff;
    text-align: center;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    z-index: 10;
}
.container-img:hover .image-title{
    opacity: 1;
    padding: 35px 0 0 0;
}
.container-img .image{
    position: relative;
    max-width: 100%;
    z-index: 0;
}

Here is a Fiddle: http://jsfiddle.net/rk16vhwe/

It's what i want to do. Nice with only CSS. – Sébastien Gicquel Nov 18 '14 at 11:17 — Sébastien Gicquel, Nov 18 '14 at 11:17

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

I don't think you can a have an underscore in the ccs classname: nom_realisation Try renaming it everywhere: as nomRealisation for example

Which characters are valid in CSS class names/selectors?

edited May 23 '17 at 12:27

Community

1
1

answered Nov 18 '14 at 10:56

GavinBrelstaff

2,592
1
17
34

score 0 · Answer 4 · answered Nov 18 '14 at 11:07

0

just get rid of:

$(this).children

Also, you are calling $(this) too many times! Call it once. Then use the variable.

var this = $(this);

answered Nov 18 '14 at 11:07

Stoycho Trenchev

41
3

How to slideToggle text over an image?

4 Answers4