How to fade in and fade out when hovering an image?

Muhammad · 2014-11-14 05:38:37

Hovering Image:

<!DOCTYPE html>
   <html>
<head>
   <title>Instagram Search</title>
   <style>
.main {
margin-top: 70px;
}
body {
background-image: url("black-texture-wallpaper-background-wood-backround-wooden-wood1.jpg");
}
.img{
    border-radius: 6px;
     -webkit-box-shadow: 1px 1px 15px #fff;
    box-shadow: 1px 1px 15px #fff;
     height: 200px;
width: 200px;
}
   </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#submit").click(function(){
                $.ajax({
                    url: "http://www.globalguideline.com/load_info.php",
                    data: {keyword: $("#keyword").val()},
                    dataType: 'JSON',
                    success: 
                        function(jsonStr) {
                        $('#name').text($("#keyword").val());
                        var all_results = '';
                        $.each(jsonStr.data, function(index, element){
                            all_results += '<div style="float:left; margin-left: 100px;" class="result_row">';
                            all_results += '<img class="img" src="'+element.profile_picture+'" />';
                            all_results += '<p align="center"> @' + element.username + '</p>';
                            all_results += '</div>';
                        });
                            $('#images').html(all_results);
                        }
                });
            }); 
        });
        $(document).ready(function() {  
        $('#images img').css('opacity', 0.4);  

   $('#images img').hover(  
   function(){  
  $(this).fadeIn('slow');  
 },  
  function(){  
   $(this).fadeOut('slow');  
  });  

   }); 
    </script>
</head>

<body>
    <header style="margin-bottom: 1cm; ">
        <div style="float:left;" align="left">Instagram User Explorer</div>
            <div align="center">
                <form name="contact" id="contact" method="get">
                Search : <input type="text" name="keyword" id="keyword"/>
                <input type="button" value="search!" name="submit" id="submit"/>
                </form>
            </div>
    </header>

    <section class="main">
        <h1 id="name" align="center"></h1>
        <div id="images"></div>
    </section>

</body>

   </html>

Retrieves from my php file some pictures and display it. I want to use jquery to fade in and out pictures when hovering in and out.

Advertisement · 2014-11-14 05:38:37

#1 2014-11-14 05:38:37

How to fade in and fade out when hovering an image?

Hovering Image:

2014-11-14 05:38:37

Re: How to fade in and fade out when hovering an image?

Board footer