How to add filter AND text to a hover event?

Discussion in 'jQuery' started by AlexHYDT123, Aug 25, 2014.

0
  1. #1
    Hi,
    I'm making a sort of "splash page" for a website and need some help. I've created an event that blurs the image when the mouse hovers in and out. Now all I need is some code that will put the word "enter" over the blurred image simultaneously. I'm new to jQuery. I've tried many different things but can't get it to work. Any help would be really appreciated.

    Below is the markup and script as it currently stands and I've included samples of the blurred and unblurred images. I want legible text to go over the blurred image. Thank you.

    [​IMG]

    [​IMG]

    HTML:
    <div class="enterPhoto">
    </div>

    CSS:
    .enterPhoto {
    background-image:url(images/20140120_1208.JPG);
    background-size:contain;
    width: 2000px;
    height: 1333px;
    margin: 0 auto;
    }
    .active {background-image: url(images/20140120_1208.JPG);
    -webkit-filter: blur(25px) opacity(50%);
    -moz-filter: blur(25px) opacity(50%);
    -o-filter: blur(25px) opacity(50%);
    -ms-filter: blur(25px) opacity(50%);
    filter: blur(25px) opacity(50%);
    }

    JS:
    $(document).ready(function(){
    $(".enterPhoto").hover(
    function(){
    $(this).addClass("active");
    },
    function(){
    $(this).removeClass("active");
    }
    );
    });
     
    AlexHYDT123, Aug 25, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    The question is - how do you want this to behave? Do you want the user to hover over "enter" to show the unfiltered image, do you want the user to click on "enter"...? What's the purpose of "enter" in this scenario?
     
    PoPSiCLe, Aug 25, 2014 IP
  3. AlexHYDT123

    AlexHYDT123 Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Thanks for your reply. I want the image to be in focus by default. When the mouse goes over I want it to blur and have an anchor link that says 'enter' or 'enter site' in the center of the blurred image.
     
    AlexHYDT123, Aug 25, 2014 IP
  4. AlexHYDT123

    AlexHYDT123 Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #4
    As of now, I can get the image to blur when I hover, but I can't figure out how to include text in that event.
     
    AlexHYDT123, Aug 25, 2014 IP
  5. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #5
    There are a few ways you could do this. It's pretty straight forward, I have added some comments to the code so hopefully you will be able to understand what I was doing.

    
<html>
<head>
    <title>Hover Photo Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(function(){
        $(".enterPhoto").hover(
        function() {
            $(this).addClass("active");
            $('h1.title').show();
        }, 
        function() {
            $(this).removeClass("active");
            $('h1.title').hide();
        }
        );
    });
    </script>
    <style type="text/css">
    /* set the container to relative so we can position elements inside it */
    .container{
        position: relative;
    }
    .enterPhoto {
        /*remove this and uncomment original*/
        background-image: url('https://forums.digitalpoint.com/proxy/Zjl03hsYz9oe7VoaA6cV62aBfuIKUvS2I6HmJLJi/image.png');
        /*background-image:url(images/20140120_1208.JPG);*/
        background-size:contain;
        width: 100%;
        height: 1333px;
        margin: 0 auto;
    }
        .enterPhoto.active {
            -webkit-filter: blur(25px) opacity(50%);
            -moz-filter: blur(25px) opacity(50%);
            -o-filter: blur(25px) opacity(50%);
            -ms-filter: blur(25px) opacity(50%);
            filter: blur(25px) opacity(50%);
        }
    /*set heading styles here and hide by default*/
    h1.title{
        width: 300px;
        margin-left: -150px;
        display: none;
        position: absolute;
        top: 30%;
        left: 50%;
        text-align: center;
        color: #000;
    }

    </style>
</head>
<body>
    <div class="container">
        <div class="enterPhoto"></div>
        <!-- keep the heading out of the background image wrapper to prevent blur being applied as well -->
        <h1 class="title">Welcome Text Here</h1>
    </div>
</body>
</html>
    Code (markup):
     
    HuggyStudios, Aug 26, 2014 IP