У меня есть css и asp.net, но когда наведите курсор мыши, он не работает, как я хочу. Но мой css отлично работает на html. Как я могу сделать это onHover Change с помощью css.Изображение ASP.Net на hover через css
Это мой asp.net
<asp:Image ID="Image1" runat="server" CssClass="body read-more image-frame,h2,p "/>
И это мой CSS
.body {
font-family:Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
background: #222;
}
.image-frame {
position:relative;
width:190px;
height:230px;
margin:10px;
cursor:pointer;
overflow:hidden;
text-align:center;
float:left;
background:#fff;
}
.image-frame .img {
margin-top:10px;
height:125px;
background: #eee;
position: relative;
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: cover;
}
.image-frame h2 {
font-size: 14px;
height:30px;
}
.image-frame p {
font-size:22px;
font-weight:700;
margin:0;
}
.image-frame p.only {
position:absolute;
left:40px;
font-size: 10px;
bottom:20px;
}
.image-frame .image-hover {
width:190px;
height:250px;
background:rgba(255,255,255, 0.9);
position:absolute;
bottom:-250px;
opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
color:#ffffff;
transition:bottom 0.4s , opacity 0.4s;
-webkit-transition:bottom 0.4s , opacity .2s;
}
.image-frame:hover .image-hover{
bottom:0px;
opacity:1;
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
-moz-opacity: 1;
-khtml-opacity:1;
transition:bottom 0.4s , opacity 0.4s;
-webkit-transition:bottom 0.4s linear, opacity 0.4s;
}
.read-more {
color: #FFF;
text-decoration: none;
background:#8D171A;
padding: 10px 20px;
margin:100px auto 0px auto;
transition: background 0.4s;
-webkit-transition: background 0.4s ;
text-transform: uppercase;
display:block;
width:100px;
}
.read-more:hover {
background: #333;
transition: background 0.4s;
-webkit-transition: background 0.4s;
}
Выход я хочу это: http://i.imgur.com/jg9Vmxz.jpg
На этой странице просмотрите сгенерированную ссылку, чтобы увидеть, что для него выводит HTML. Соответствуйте правилам. –