CODEWITHSUNDEEP
javascriptphpjquerycsswordpress
user3474160
user3474160

Reputation: 31

jQuery - fading image and text on hover

I want to make 4 box with image on background while on hover fade in and show some text. The images will be different, and will comes from post thumbnail. The box will be a hyperlink to post. In PHP i have this:

<div class="kwadraty-post2">
    <?php
    $kwadrat1 = get_theme_mod('box1');
    $postid = url_to_postid( $kwadrat1 ); 
    ?> 
    <a href="<?php echo $kwadrat1 ?>">
        <?php echo get_the_post_thumbnail( $postid ); ?>
        <span><?php echo get_theme_mod('box1_title');?></span>        
    </a>
</div>

And i have this in JS script

$(document).ready(function () {
    $(".kwadraty-post2").MyFadeOverImage({
        normalAlpha: 0.5,
        hoverAlpha: 1,
        normalToneColor: "#000",
        imageWidth: 'auto',
        imageHeight: '100%'
    });
    $(".test").hover(function () {
        $(".kwadraty-post2 span").toggle("slow");

    });

});

I use THIS to blackout the image. This what I've made works, but not properly. After hover the is the image blackout. How I can make that text will be visible after hover on the box, no matter where mouse cursor will be?

I sorry for mistakes in this question, English is not my primary language.

This is graphical presentation of my struggle with JS :)

Upvotes: 3

Views: 556

Answers (2)

Taimour Tanveer
Taimour Tanveer

Reputation: 408

Have you tried to use this 

$(".kwadraty-post2").hover(function () {
        $(".kwadraty-post2 span").toggle("slow");

    });

instead of this

$(".test").hover(function () {
        $(".kwadraty-post2 span").toggle("slow");

    });

EDIT: You can add an overlay and then use this css for fading:

.overlay{
    z-index:10;
    width:300px;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    background-color:black;
    opacity:0.5;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.overlay:hover{
    opacity:0;
}

Fiddle: http://jsfiddle.net/6Z6Ev/25/

Upvotes: 1

Steven X
Steven X

Reputation: 394

Dzien dobry, if I am right. Your idea is: when you hover the image, the span (which is a sibling of the image) should be shown. If you un-hover, it should still be there.

<a href="#">
   <img class="my-img" src="" />
   <span class="span-text">text</span>
</a>

If your code looks like this you can hide the span on default in your css and try something like this in jQuery inside the $(document).ready() function

$('.my-img').hover(function() {
   $(this).siblings('.span-text').show();
});

Upvotes: 0

Related Questions