ansaurus

Question

How to make gallery image fade on hover to reveal details such as title, enlarge, visit site, etc?

Answer 1

A:

You could use JavaScript and put this in a loop with a time lag and slide the value of MyVariable from Transparent to Opaque.

document.getElementById("MyImage").style.MozOpacity=MyVariable

Raj More 2010-07-20 12:19:27

Answer 2

A:

To create from the ground up, it's actually really simple! Here is a page that actually works!

<html>
<head>
    <title>ih - by balupton</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    <style>
        .ih { position:relative; }
        .ih, .ih-image, .ih-info { display:block;width:330px;height:220px; }
        .ih-image, .ih-info { z-index:500;position:absolute;top:0;left:0;right:0;bottom:0; }
        .ih-info { z-index:501;background:black;color:white; }

    </style>
</head>
<body>
    <div class="ih">
        <img class="ih-image" src="http://designsnack.com/screenshots/image.php?width=330&amp;amp;height=220&amp;amp;cropratio=330:220&amp;amp;image=/screenshots/8264948088.jpg"/&gt;
        <div class="ih-info">
            Your overlay content
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            $('.ih').hover(
                // Over
                function(){
                    var $ih = $(this);
                    $ih.find('.ih-info').stop(true,true).animate({opacity:0.8}, 400);
                },
                // Out
                function(){
                    var $ih = $(this);
                    $ih.find('.ih-info').stop(true,true).animate({opacity:0}, 400);
                }
            ).find('.ih-info').css('opacity',0);
        });
    </script>
</body>
</html>

See it live: http://www.balupton.com/sandbox/ih.html

balupton 2010-07-20 12:26:11

Thanks for you're help balupton! That's the sort of thing I was thinking of. I'll take a closer look at your example as soon as I can.Thanks Again :)

ade123 2010-07-20 12:55:52

ansaurus

tags:

views:

answers:

How to make gallery image fade on hover to reveal details such as title, enlarge, visit site, etc?

related questions