CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sébastien Gicquel
Sébastien Gicquel

Reputation: 4386

How to slideToggle text over an image?

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);

Upvotes: 0

Views: 182

Answers (4)

Stoycho Trenchev
Stoycho Trenchev

Reputation: 41

just get rid of: 

$(this).children

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

var this = $(this);

Upvotes: 0

Caio Kawasaki
Caio Kawasaki

Reputation: 2950

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/

Upvotes: 1

George
George

Reputation: 36794

  • .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

Upvotes: 1

GavinBrelstaff
GavinBrelstaff

Reputation: 3069

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?

Upvotes: 0

Related Questions