locked
Help with image width and hover over image to open new page RRS feed

  • Question

  • User-501297529 posted

    I have an image on the home page that I want to open a new page when I hover over the image. How do I do this?

    Also I'm trying to get the image to cover the width of the home page. I currently have this in my css:

    img {
        /*max-width: 200%;*/
        width: auto;
        height: auto;
        background-color: #000;
        vertical-align: middle;
        border: 0;
        -ms-interpolation-mode: bicubic
    }
    
    #map_canvas img,
    .google-maps img {
        max-width: none
    }
    

    Saturday, January 26, 2019 6:20 PM

Answers

  • User-501297529 posted

    mgebhard

    I have an image on the home page that I want to open a new page when I hover over the image. How do I do this?

    As I understand, your question is how to write a mouseover handler and open a new window.

    JavaScript inline.

    <img onmouseover="myFunction(this)" src="my.gif" alt="gif">
    myFunction(elem) {
    	window.open([params]);
    }

    JavaScript Event handler

    var img = document.getElementById("test");
    img.addEventListener("mouseenter", function( event ) {
    	window.open([params]) 
    }

    jQuery

    $('#ImgId').mouseover(function(){
    	window.open([params]);
    });

    Reference docs.

    https://www.w3schools.com/jsref/met_document_addeventlistener.asp

    https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

    https://developer.mozilla.org/en-US/docs/Web/API/Window/open

    https://api.jquery.com/mouseover/

    bootzilla

    Also I'm trying to get the image to cover the width of the home page. I currently have this in my css:

    I'm not sure what this means.  If the image covers the home page then you get stuck unless you click the back button.  

    I have a question about the javascript event handler and jquery. Specifically where do I place them in the code in my html?  Does that all go in the <script> code block? That doesn't seem correct. This the code on my html page right now.

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Daily Process</title>
    
    <link type="text/css" href="Content/dailyprocessbootstrap.css" rel="stylesheet" />
       
    
    <script type="text/javascript">
             myFunction(elem) {
    window.open([params]);
    }
    var img = document.getElementById("test");
    img.addEventListener("mouseenter", function (event) {
    window.open([params])
    }
    $('#ImgId').mouseover(function () {
    window.open([params]);
    }); </script> </head> <body> <div >&nbsp; <img src="images/White%20Daily%20Sig.png" class="center" onmouseover="myFunction(this)" /> </div> </body> </html>

    Also when I hover over the image how to I tell the code what page I want it to open when I hover over the image. For example let's say the page I want to open after the image is called about.aspx. Where does that go in the code?

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 27, 2019 7:20 PM

All replies

  • User475983607 posted

    I have an image on the home page that I want to open a new page when I hover over the image. How do I do this?

    As I understand, your question is how to write a mouseover handler and open a new window.

    JavaScript inline.

    <img onmouseover="myFunction(this)" src="my.gif" alt="gif">
    myFunction(elem) {
    	window.open([params]);
    }

    JavaScript Event handler

    var img = document.getElementById("test");
    img.addEventListener("mouseenter", function( event ) {
    	window.open([params]) 
    }

    jQuery

    $('#ImgId').mouseover(function(){
    	window.open([params]);
    });

    Reference docs.

    https://www.w3schools.com/jsref/met_document_addeventlistener.asp

    https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

    https://developer.mozilla.org/en-US/docs/Web/API/Window/open

    https://api.jquery.com/mouseover/

    bootzilla

    Also I'm trying to get the image to cover the width of the home page. I currently have this in my css:

    I'm not sure what this means.  If the image covers the home page then you get stuck unless you click the back button.  

    Saturday, January 26, 2019 8:19 PM
  • User409696431 posted

    For your CSS question:   img width:auto does not mean width:100%, which is what you seem to want.  width:auto for an image is just the actual width of the image.

    Saturday, January 26, 2019 9:57 PM
  • User-501297529 posted

    mgebhard

    I have an image on the home page that I want to open a new page when I hover over the image. How do I do this?

    As I understand, your question is how to write a mouseover handler and open a new window.

    JavaScript inline.

    <img onmouseover="myFunction(this)" src="my.gif" alt="gif">
    myFunction(elem) {
    	window.open([params]);
    }

    JavaScript Event handler

    var img = document.getElementById("test");
    img.addEventListener("mouseenter", function( event ) {
    	window.open([params]) 
    }

    jQuery

    $('#ImgId').mouseover(function(){
    	window.open([params]);
    });

    Reference docs.

    https://www.w3schools.com/jsref/met_document_addeventlistener.asp

    https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

    https://developer.mozilla.org/en-US/docs/Web/API/Window/open

    https://api.jquery.com/mouseover/

    bootzilla

    Also I'm trying to get the image to cover the width of the home page. I currently have this in my css:

    I'm not sure what this means.  If the image covers the home page then you get stuck unless you click the back button.  

    I have a question about the javascript event handler and jquery. Specifically where do I place them in the code in my html?  Does that all go in the <script> code block? That doesn't seem correct. This the code on my html page right now.

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Daily Process</title>
    
    <link type="text/css" href="Content/dailyprocessbootstrap.css" rel="stylesheet" />
       
    
    <script type="text/javascript">
             myFunction(elem) {
    window.open([params]);
    }
    var img = document.getElementById("test");
    img.addEventListener("mouseenter", function (event) {
    window.open([params])
    }
    $('#ImgId').mouseover(function () {
    window.open([params]);
    }); </script> </head> <body> <div >&nbsp; <img src="images/White%20Daily%20Sig.png" class="center" onmouseover="myFunction(this)" /> </div> </body> </html>

    Also when I hover over the image how to I tell the code what page I want it to open when I hover over the image. For example let's say the page I want to open after the image is called about.aspx. Where does that go in the code?

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 27, 2019 7:20 PM
  • User-893317190 posted

    Hi bootzilla,

    You should pass the actual parameter to the method not [params];

    For example , if you want to open About.aspx.

    You should write

       <meta charset="utf-8" />
        <title></title>
        <style>
            img {
               
                width: 100%;
                max-width: 100%;
                max-height: 500px;
                height: 300px
            }
        </style>
        <script src="../Scripts/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <img src="../images/WingtipToys/boatsail.png" />
    </body>
    <script>
        $(function () {
            var count = 0;
            $("img").mouseenter(function () {
                if (count == 0) {  // prevent opening the second time
                    window.open("/About.aspx");
                    count++;
                } 
              
            })
        })
    </script>

    The result

    Best regards,

    Ackerly Xu

    Monday, January 28, 2019 5:09 AM
  • User-501297529 posted

    Ok thanks Ackerly. I got it to work. Now another smaller issue is there a way to get the mouseover/hover to work when I scroll to a certain part of the image like the middle of the image. The image is kind of big on the home page. When you hover over it immediately opens the next page without seeing the entire image. Or is there a way so when you hover over it has a slow dissolve or some sort of slow effect?

    Monday, January 28, 2019 6:14 PM
  • User-893317190 posted

    Hi bootzilla,

    If you want  the new page to appear  more slowly, you could use the setTimeout function , it could delay  your code. The first parameter is a function which will execute your code, the second parameter is the time you want to delay. Here I write 3000 which means 3 seconds.

    <script>
        $(function () {
            var count = 0;
            $("img").mouseenter(function () {
                if (count == 0) {
                    setTimeout(function () {
                        window.open("/About.aspx");
                            },3000)
                   
                    count++;
                } 
              
            })
        })
    </script>

    If you want to scroll to a certain part  to show the new page, you could try window.onscoll  and use document.body.scrollTop to watch how much the body is scrolled.

    For more information about onscoll,you could refer to https://www.w3schools.com/jsref/event_onscroll.asp

    Best regards,

    Ackerly Xu

    Tuesday, January 29, 2019 1:14 AM
  • User-501297529 posted

    On second thought I'm unable to get your mouseenter to work. It does nothing when I hover over the image. Here is the code I updated with your suggestions

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Daily Process</title>
    
    <link type="text/css" href="Content/dailyprocessbootstrap.css" rel="stylesheet" />
       
     
    
       </head>
    <body>
    	
    			<div >&nbsp;
                    
                    <img src="images/White%20Daily%20Sig.png" class="center"/>
    
    </div>
               
    
      
    </body>
        <script>
        $(function () {
            var count = 0;
            $("img").mouseenter(function () {
                if (count == 0) {
                    setTimeout(function () {
                        window.open("/About.aspx");
                            },3000)
                   
                    count++;
                } 
              
            })
        })
    </script>
    </html>

    The code that I have currently works but I don't know how to add the timer for it. I'm using a onmouseover in the href tag.

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Daily Process</title>
    
    <link type="text/css" href="Content/dailyprocessbootstrap.css" rel="stylesheet" />
       
     
    
       </head>
    <body>
    	
    			<div >&nbsp;
                    <a href="dailyprocess.aspx" onmouseover="parent.location='default.aspx'";>
                    <img src="images/White%20Daily%20Sig.png" class="center"/></a>
    
    </div>
               
    
      
    </body>
    </html>

    Which is better because the second code works but I can't get the first to work at all.

    Tuesday, January 29, 2019 2:37 AM
  • User2103319870 posted

    bootzilla

    I'm unable to get your mouseenter to work. It does nothing when I hover over the image

    Make sure you have added Jquery references in your code. Because in the code you are using https://api.jquery.com/element-selector/ Element Selector of Jquery

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Daily Process</title>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link type="text/css" href="Content/dailyprocessbootstrap.css" rel="stylesheet" />
       
     
    
       </head>
    <body>
    	
    			<div >&nbsp;
                    
                    <img src="images/White%20Daily%20Sig.png" class="center"/>
    
    </div>
               
    
      
    </body>
        <script>
        $(function () {
            var count = 0;
            $("img").mouseenter(function () {
                if (count == 0) {
                    setTimeout(function () {
                        window.open("/About.aspx");
                            },3000)
                   
                    count++;
                } 
              
            })
        })
    </script>
    </html>

    Tuesday, January 29, 2019 2:42 AM
  • User-501297529 posted

    Added that and it still doesn't work

    !DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Daily Process</title>
        <script src="https://code.jquery.com/jquery.min.js"></script>
    <link type="text/css" href="Content/dailyprocessbootstrap.css" rel="stylesheet" />
       
     
    
       </head>
    <body>
    	
    			<div >&nbsp;
                    
                    <img src="images/White%20Daily%20Sig.png" class="center"/>
    
    </div>
               
    
      
    </body>
        <script>
        $(function () {
            var count = 0;
            $("img").mouseenter(function () {
                if (count == 0) {
                    setTimeout(function () {
                        window.open("/About.aspx");
                            },3000)
                   
                    count++;
                } 
              
            })
        })
    </script>
    </html>

    Tuesday, January 29, 2019 3:07 AM
  • User-501297529 posted

    Never mind I'm able to get it to work. Although I had to turn my popup blocker off to get it to work. Not sure if there is anything I can do to get around that besides turning it off.

    Also does anyone know how to do a slow dissolve when hovering over the image to the next page?

    Tuesday, January 29, 2019 4:12 AM
  • User-893317190 posted

    Hi bootzilla,

    You could set google browser

    https://support.google.com/chrome/answer/95472?co=GENIE.Platform%3DDesktop&hl=en

    But it could only applies to your local computer, if you want to apply to any client, I suggest you could use modal pop up.

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <style>
            img {
                /*width:100%,
              max-width:'100%',
              max-height:'500px',
               height: '330px'*/
                width: 100%;
                max-width: 100%;
                max-height: 500px;
                height: 300px
            }
        </style>
        <script src="../Scripts/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <img src="../images/WingtipToys/boatsail.png" />
    
        <input type="button" id="btn" />
    
        <div class="modal" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                 
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
        </div>
    </body>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script>
        $(function () {
           
            var count = 0;
            $("img").mouseenter(function () {
                if (count == 0) {
                    setTimeout(function () {
                        $('#myModal').modal('show');  //show the modal
                        $("#myModal .modal-body").html("<iframe src='/About.aspx'></iframe>") // insert a iframe into the modal
                    }, 3000)
                   
                    count++;
                }
    
            })
        })
    </script>

    For more information about bootstrap modal pop up, please refer to 

    https://getbootstrap.com/docs/4.2/components/modal/

    Best regards,

    Ackerly Xu

    Tuesday, January 29, 2019 5:28 AM
  • User-501297529 posted

    Still looking for an answer on this:

    Also does anyone know how to do a slow dissolve when hovering over the image to the next page?

    Wednesday, January 30, 2019 6:48 PM
  • User-893317190 posted

    Hi bootzilla,

    Browser's blocking pop up is its default behavior, we could hardly  change the behavior, because browser wants to protect the interests of users.

    If you want the browser not to block the pop up for all the users, you should let the user open  the window.

    For example , prepare a button and let the user to click , browser will not prevent this kind of pop up.

        <input type="button" id="btn" value="click me to open " />
    
        
    </body>
    
    
    
    <script>
        $(function () {
         
           
            $("#btn").click(function () {
                window.open("/About.aspx");
            })
        })
    </script>

    So , I suggest you simulate  another window using an iframe  and show the iframe using ui plugin such as jquery ui, bootstrap.

    https://jqueryui.com/dialog/#animated

    Best regards,

    Ackerly Xu

    Thursday, January 31, 2019 6:17 AM
  • User-501297529 posted

    Hi bootzilla,

    Browser's blocking pop up is its default behavior, we could hardly  change the behavior, because browser wants to protect the interests of users.

    If you want the browser not to block the pop up for all the users, you should let the user open  the window.

    For example , prepare a button and let the user to click , browser will not prevent this kind of pop up.

        <input type="button" id="btn" value="click me to open " />
    
        
    </body>
    
    
    
    <script>
        $(function () {
         
           
            $("#btn").click(function () {
                window.open("/About.aspx");
            })
        })
    </script>

    So , I suggest you simulate  another window using an iframe  and show the iframe using ui plugin such as jquery ui, bootstrap.

    https://jqueryui.com/dialog/#animated

    Best regards,

    Ackerly Xu

    I got the popup thing.

    But this is still not answering my slow dissolve or slow effect question. Do you understand what I'm asking.

    Thursday, January 31, 2019 9:09 PM
  • User-893317190 posted

    Hi bootzilla,

    Do you need animation for modal pop up?

    Bootstrap modal has many animation plugin, you could control the effect of the modal through these plugin.

    Below is a small sample.

    First the resource you need to import. data-easein="flipYIn" is used to control the effect the modal.

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js"></script>
    

    Then html and js

    <body>
        <img src="../images/WingtipToys/boatsail.png" />
    
        <input type="button" id="btn" value="click me to open " />
        <a href="#costumModal20" role="button" class="btn btn-default" data-toggle="modal">
            slideDownBigIn
        </a>
        <div id="costumModal20" class="modal" data-easein="flipYIn" tabindex="-1" role="dialog" aria-labelledby="costumModalLabel" aria-hidden="true" style="display:none" data-backdrop="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title">
                            Modal Header
                        </h4>
                    </div>
                    <div class="modal-body">
                        <iframe src="/About.aspx"></iframe>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">
                            Close
                        </button>
                        <button class="btn btn-primary">
                            Save changes
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
    
    
    <script>
        $(function () {
           
            var count = 0;
            $("img").mouseenter(function () {
                if (count == 0) {
                    setTimeout(function () {
                      
                              //  window.open("/About.aspx");
    //show the modal with new window $('#costumModal20').modal('toggle') }, 1000) count++; } }) // $("#btn").click(function () { // window.open("/About.aspx"); // }) }) </script> <script> $(".modal").each(function (l) { $(this).on("show.bs.modal", function (l) { var o = $(this).attr("data-easein"); "shake" == o ? $(".modal-dialog").velocity("callout." + o) : "pulse" == o ? $(".modal-dialog").velocity("callout." + o) : "tada" == o ? $(".modal-dialog").velocity("callout." + o) : "flash" == o ? $(".modal-dialog").velocity("callout." + o) : "bounce" == o ? $(".modal-dialog").velocity("callout." + o) : "swing" == o ? $(".modal-dialog").velocity("callout." + o) : $(".modal-dialog").velocity("transition." + o) }) }); </script>

    The result.

    There are also other animations. Please refer to

    https://www.uplabs.com/posts/30-bootstrap-modal-animation-effects

    Click html ,css, js , resource button to get its source code.

    Friday, February 1, 2019 1:47 AM
  • User-501297529 posted

    Not exactly. What I'm looking for is a fade out from the image once you hover over to the content. I don't have the exact content but a placeholder in the <p> tags. So once you hover over the image it fades out or dissolves or some kind of effect to the content in the <p>. I don't want a modal form just fade to the placeholder content:

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Daily Process</title>
        <script src="Scripts/jquery-1.10.2.min.js"></script>">
    <link type="text/css" href="Content/dailyprocessbootstrap.css" rel="stylesheet" />
       
     
    
       </head>
    <body>
    	
    			<div >&nbsp;
                    
                    <img src="images/White%20Daily%20Sig.png" class="center"/>
    
    </div>
          <p><a href="http:/www.google.com">Google </a> page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here
      page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here
      page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here
      page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
    
    <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here
      page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here
      page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here
      page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
    
    <p>page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here
      page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here
      page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here
      page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here page content goes here </p>
    
    
      
    </body>
        <script>
        $(function () {
            var count = 0;
            $("img").mouseenter(function () {
                if (count == 0) {
                    setTimeout(function () {
                        window.open("/About.aspx");
                            },5000)
                   
                    count++;
                } 
              
            })
            })        
    </script>
    </html>

    I'm assuming I get rid of the 'window.open'  and add a fade out to the css?

    This is a good example of what I'm looking for except I don't want it to go back to the image when you move out after it fades to the words. It goes back to displaying the image when you aren't hovered over it. I want it to stay with the words.

    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

    Friday, February 1, 2019 2:44 AM
  • User-893317190 posted

    Hi bootzilla,

    Do you mean you want to hover over the image , the word  will appear and always stay even when you move out of the image?

    If so , you could try the code below.

        <style>
            .container {
                ;
                width: 50%;
            }
    
            .image {
                display: block;
                width: 100%;
                height: auto;
            }
    
            .overlay {
                ;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                height: 100%;
                width: 100%;
                opacity: 0;
                transition: .5s ease;
                background-color: #008CBA;
            }
    
            /*.container:hover .overlay {
                opacity: 1;  
            }*/    
    
    
            .text {
                color: white;
                font-size: 20px;
                ;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                text-align: center;
            }
        </style>
       <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>
        <h2>Fade in Overlay</h2>
        <p>Hover over the image to see the effect.</p>
    
        <div class="container">
            <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
            <div class="overlay">
                <div class="text">Hello World</div>
            </div>
            </div>
    
    
        <script>
            $(function () {
             
                $(".container").mouseover(function () {
                    $(this).find(".overlay").css("opacity",1);
                })
            })
        </script>
    </body>
    </html>

    The result.

    Friday, February 1, 2019 6:16 AM
  • User-501297529 posted

    Hi bootzilla,

    Do you mean you want to hover over the image , the word  will appear and always stay even when you move out of the image?

    If so , you could try the code below.

        <style>
            .container {
                ;
                width: 50%;
            }
    
            .image {
                display: block;
                width: 100%;
                height: auto;
            }
    
            .overlay {
                ;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                height: 100%;
                width: 100%;
                opacity: 0;
                transition: .5s ease;
                background-color: #008CBA;
            }
    
            /*.container:hover .overlay {
                opacity: 1;  
            }*/    
    
    
            .text {
                color: white;
                font-size: 20px;
                ;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                text-align: center;
            }
        </style>
       <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    </head>
    <body>
        <h2>Fade in Overlay</h2>
        <p>Hover over the image to see the effect.</p>
    
        <div class="container">
            <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
            <div class="overlay">
                <div class="text">Hello World</div>
            </div>
            </div>
    
    
        <script>
            $(function () {
             
                $(".container").mouseover(function () {
                    $(this).find(".overlay").css("opacity",1);
                })
            })
        </script>
    </body>
    </html>

    The result.

    Thanks Ackerly for all your help on this. This is what I'm looking for at least for now. One other thing I wanted to ask is on the Hello World overlay I want to have hyperlinks or images with hyperlinks along the bottom of the overlay horizontally. How would I do that?

    Saturday, February 2, 2019 12:37 AM
  • User-893317190 posted

    Hi bootzilla,

    You could use the code below. If you want to start from the left ,you could remove left:50%;transform:translateX(-50%)

    <div class="container">
            <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
            <div class="overlay">
                <div class="text">Hello World</div>
                <div style=";bottom:0;left:50%;transform:translateX(-50%)">
                    <a href="#" >highlink</a>  <a href="#" style=";bottom:0">highlink</a>  <a href="#" >highlink</a>
                </div>
            </div>
        </div>

    Best regards,

    Ackerly Xu

    Monday, February 4, 2019 8:33 AM