How to posibal image hover effect another image ?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • sharmahemal
    New Member
    • Jul 2012
    • 19
    #1

    How to posibal image hover effect another image ?

    Code:
    <!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
div
{

background:url(banner.jpg);
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */

}


div:hover
{
background:url(banner.jpg);
}


</style>
</head>
<body>



<div></div>



</body>
</html>
    Tags: None
    • ariful alam
      New Member
      • Jan 2011
      • 185
      #2
      R you trying to create a background image change on hover? if yes then your writings has a little error. you used same image in div and div:hover css settings. you should use different image for div and div:hover css settings. moreover your div css settings has no width and height settings. so the div will not have a sized defined to show the background image in browser. you should use a width and a height for the div.

      here is the changed code:

      Code:
      <!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
div
{
   width:500px;
   height:150px;
   background:url(banner1.jpg);
   
   transition:width 2s;
   -moz-transition:width 2s; /* Firefox 4 */
   -webkit-transition:width 2s; /* Safari and Chrome */
   -o-transition:width 2s; /* Opera */
}

div:hover
{
   background:url(banner2.jpg);
}
</style>
</head>
<body>

<div></div>
</body>
</html>

        Comment

        • sharmahemal
          New Member
          • Jul 2012
          • 19
          #3
          now in hover to add unorder list also?can it possibal?

            Comment

            • ariful alam
              New Member
              • Jan 2011
              • 185
              #4
              @sharmahemal:

              sorry, don't get what about you are asking. can you explain please.

                Comment

                • sharmahemal
                  New Member
                  • Jul 2012
                  • 19
                  #5
                  Code:
                  div:hover
{
   background:url(banner2.jpg);
<ul>
<li>fgg</li>
<li>fgg</li>
<li>fgg</li>
</ul>
}
                  can it possibal? so please give me some refrence

                    Comment

                    • ariful alam
                      New Member
                      • Jan 2011
                      • 185
                      #6
                      you are trying to add HTML tags on hover. that's not possible.

                      but you can do this kind of works using JavaScript like some hidden div can be shown by hovering on some other div.

                        Comment

                        • ariful alam
                          New Member
                          • Jan 2011
                          • 185
                          #7
                          you are trying to add HTML tags on hover. that's not possible.

                          but you can do this kind of works using JavaScript like some hidden div can be shown by hovering on some other div.

                            Comment

                            Previous template Next
                            Working...