2015-05-14 6 views
0

У меня есть 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

+0

На этой странице просмотрите сгенерированную ссылку, чтобы увидеть, что для него выводит HTML. Соответствуйте правилам. –

ответ

0

Моя первая догадка есть проблема с вашим тегом .NET:

<asp:Image ID="Image1" runat="server" CssClass="body read-more image- frame,h2,p "/> 

Нежелательные (?) Пробелы между image- и frame и запятые не действительны. Попробуйте следующее:

<asp:Image ID="Image1" runat="server" CssClass="body read-more image-frame "/> 
+0

Извините. В то время как я писал код здесь, я случайно написал эти пробелы – Fattur

+0

Все еще не думаю, что эти запятые действительны. –

+0

Мы уже пробовали, что и теги верны. Всюду в Интернете вы можете их увидеть. – Fattur

Смежные вопросы