Member 12926744 Ответов: 1

Кнопка отображения поверх изображения при наведении курсора мыши

Всем привет,
Мне нужно отобразить кнопку над изображением во время наведения мыши на изображение и размыть изображение во время наведения мыши. В настоящее время кнопка отображается ,но над изображением и изображение не размыто.Мне нужно отобразить его поверх изображения и размыть изображение, когда кнопка diplaying.
Любая помощь будет очень признательна.заранее спасибо.

Что я уже пробовал:

<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>

1 Ответов

Рейтинг:
2

HelloIt'sMe_M

попробуйте этот код 

<!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>







Image 1







<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>