Как показать текст на ImageButton при наведении курсора на css

Question

У меня есть кнопка изображения внутри div. Я увеличиваю размер изображения и z-индекс при наведении на div. но я хочу добавить текст над кнопкой изображения, когда наводится вызов. Как я могу сделать ?

мой CSS:

.HoverImageClass input[type=image]:hover 
{ 
    position: relative; 
    z-index: 10000; 
    height: 274px; 
    width: 226px; 
    margin-top: -67px; 
    margin-left: -14px; 
    padding-bottom: 13px; 
    background-color: #F7F6EB; 
} 

мой HTML:

<div id="divImageDisplay" class="HoverImageClass" runat="server"> 


<asp:ImageButton runat="server" CssClass="course_img" ID="imgbtnCourse" AlternateText='<%#Eval("LevelName") %>' ToolTip='<%#Eval("LevelName") %>' ImageUrl='<%#Eval("CourseImagePath") %>' CausesValidation="False" CommandName="AddToCart" CommandArgument='<%# String.Format("{0},{1},{2},{3},{4},{5}",Eval("ID"),Eval("LevelID"),Eval("CurrencyWithValue"),Eval("CourseImagePath"),Eval("CategoryID"),Eval("MRP")) %>'></asp:ImageButton> 

</div> 

Answer 1

Ну, если вы делаете текст на кнопке с помощью обычной HTML, один из возможных методов бы на основной класс CSS сделать "color:" "" то же, что и в фоновом режиме, а затем в классе: hover вы можете изменить его на другой цвет, который будет доступен для чтения/права. Или, возможно, вы даже можете установить размер шрифта на что-то действительно крошечное на оригинале, а затем поднять его на размер: hover!

Надеюсь, это поможет!