Click here to Skip to main content
13,402,795 members (41,729 online)
Rate this:
 
Please Sign up or sign in to vote.
Hi all,
I need to display a button over an image during mousehover over the image and blur the image during mousehover. Currently the button is displaying ,but above the image and the image is not blurred.I need to display it over the image and blur the image when button is diplaying.
Any help will really appreciated.Thanks in Advance.

What I have tried:

<tr>
                                                                                            <td align="left">

                                                                   <asp:Image ID="Image2" CssClass="img" Width="150px" ImageUrl='<%# Bind("IN0050102", "../pro/Certificates/{0}") %>' runat="server" />
                                                                                                <cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" PopupControlID="popupImage" TargetControlID="Image2"
                                                                                                    HoverDelay="100"></cc1:HoverMenuExtender>
                                                                                                <asp:Panel runat="server" ID="popupImage" BorderColor="#628BD7">
                                                                                                <asp:Button ID="btn_changepic" runat="server" Text="Change/upload Photo" Width="200px" CssClass="btn5"/>
                                                                                                 </asp:Panel>

                                                                                            </td>
                                                                                            <td> </td>
                                                                                            <td align="left">
                                                                                                <asp:Label Font-Size="X-Large" ID="lb_empname" align="center" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "IN00502")%>'></asp:Label>  
                                                                                                 <asp:Label Font-Size="Large" ID="Label1" align="center" runat="server" Text='<%# Eval("IN00504", "(Emp Code:{0})") %>'></asp:Label><br />
                                                                                                 <asp:Label Font-Size="Large" ID="Label2" align="center" runat="server" Text='<%# Eval("IN005_03", "{0}") %>'></asp:Label>


                                                                                                </td>
                                                                                        </tr>
Posted 3-Jan-18 1:46am
Updated 3-Jan-18 21:31pm

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

try this code
<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>anythings</title>
        
        <pre><pre lang="CSS">
<style>
        .div1 {
    float: left;
    width: 30%;
    overflow: hidden;
    margin-left: 1.33333%;
    margin-bottom: 12px;
    border-radius: 10px;
    position: relative;
}
.div1 .itembox{
   overflow: hidden; 
}

.div1 .itembox .item img{
    width: 100%;
    height: 100%;
}
.div1 .itembox .item .over {
position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(247,96,14,.8);
    color: #fff;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;   
}
.dis{
    display:none;
}
        </style>















<button id="btn" class="dis"> Hello </button>
<script >
            var btn=document.getElementById('btn');
            var ov=document.getElementById('blur');
            function fundisplay() {
                ov.classList.remove("over");
                btn.classList.remove("dis");
            }
            function funblur() {
                ov.classList.add("over");
                btn.classList.add("dis");          
            }
        </script>

</body>
</html>
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy |
Web02 | 2.8.1802120.2 | Last Updated 4 Jan 2018
Copyright © CodeProject, 1999-2018
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100