locked
Text are not displayed RRS feed

  • Question

  • User-401818107 posted

    Hi experts, I have a style which displays the text when users mouse over the image. It works perfectly in the Chrome, but it does not in the Firefox and Internet Explorer. Please advise! 

    Thank you!

    <style type="text/css">
    
    #image-container {
      ;
        width: 120px;
        height: 90px;
      
    }
    
    #image-container .image,
    #image-container .text {
      transition: opacity 0.5s ease-in-out;
    }
    
    #image-container .text {
     ;
        top: 0;
       left:0;
        margin: 0 auto;
        text-align: center;
        opacity: 0;    
       font-weight: bold; font-size: 18px; color: #fff; background-color: blue;  margin-top: -50px;
         display: inline-block;
        width: 121px;
        height: 26px; padding-top: 10px;
        
    }
    
    #image-container:hover.image {
      opacity: 0; 
    }
    
    #image-container:hover .text {
      opacity: 1; 
    }
    </style>
    This is the image
    
    <div id="image-container"><img src="pen.jpg"><span class="text">QUICK VIEW</span></div>
    Thursday, November 29, 2018 4:36 AM

Answers

  • User1724605321 posted

    Hi Jessy ,

    Which version of IE you want to make that work ? I tested your code in IE9+ and it works , it doesn't work in IE8- , to make it works in IE7/8 , you can use visibility attribute instead of setting "opacity" :

     <style type="text/css">
            #image-container {
                ;
                width: 120px;
                height: 90px;
            }
    
                #image-container .image,
                #image-container .text {
                    transition: opacity 0.5s ease-in-out;
                }
    
                #image-container .text {
                    ;
                    top: 0;
                    left: 0;
                    margin: 0 auto;
                    text-align: center;
                    visibility: hidden;
                    font-weight: bold;
                    font-size: 18px;
                    color: #fff;
                    background-color: blue;
                    margin-top: -50px;
                    display: block;
                    width: 121px;
                    height: 26px;
                    padding-top: 10px;
                }
    
                #image-container:hover.image {
                   visibility: hidden;
                }
    
                #image-container:hover .text {
                     visibility: visible;
    
                }
        </style>

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 30, 2018 2:44 AM