Text Pops Up Cursor Over Image

Discussion in 'HTML & Website Design' started by kertoon, Apr 20, 2016.

  1. #1
    How do I create the effect where white color text pops up when I hover cursor over a black & white image. And at the same time the image is slightly blurred. (Example Buck Mason site)
     
    kertoon, Apr 20, 2016 IP
  2. fisasti

    fisasti Active Member

    Messages:
    42
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    58
    #2
    Could you explain it a little bit more? I don't understand and i can't see the effect in that website
     
    fisasti, Apr 20, 2016 IP
  3. KangBroke

    KangBroke Notable Member

    Messages:
    1,026
    Likes Received:
    59
    Best Answers:
    4
    Trophy Points:
    265
  4. kertoon

    kertoon Well-Known Member

    Messages:
    187
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    133
    #4
    I did not put up that link. Just google "buck mason". It is a garment site.
     
    kertoon, Apr 21, 2016 IP
  5. fisasti

    fisasti Active Member

    Messages:
    42
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    58
    #5
    Yes! You can do with in css with a div that goes over all the elements of the page. In order to achieve this, you need to use a <div> with z-index higher than all the other elements in the DOM document. You want to try absolute positioning. If you're going to do this when the use goes over a div, you could try something like this using Jquery to detect the hover action:

    <script type="text/javascript">
    $('#content').hover(function () {
    $(#overlay').css('display', '');
    });
    </script>
    
    <div id="content" style="height: 100%; width: 100%;">Main content here</div>
    <div id="overlay" style="display: none;z-index: 10; width: 100%; height: 100%;">This is the overlayed content</div>
    Code (markup):
    If you don't get it, you can read something here: http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div
     
    fisasti, Apr 21, 2016 IP
  6. kertoon

    kertoon Well-Known Member

    Messages:
    187
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    133
    #6
    Thank you so much for your assistance.
     
    kertoon, Apr 23, 2016 IP
  7. fisasti

    fisasti Active Member

    Messages:
    42
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    58
    #7
    Glad it helped!
     
    fisasti, Apr 23, 2016 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    Not quite true. The z-index need only be greater than sibling, positioned elements.

    cheers,

    gary
     
    kk5st, Apr 23, 2016 IP