Текст на изображении при наведении курсора?

Я пытаюсь сделать небольшое окно в нижней-левой части изображения, когда мышь перемещается над ним. Внутри коробки там будет ссылка на другую страницу.

Здесь чем-то напоминает то, что я хочу, но коробка должна быть меньше и не подключена к границе изображения.

Я'пробовала все и могу'т найти ответ. И я Дон'т хотите использовать подсказки, не говоря уже о том, что у меня нет никаких JavaScript знания. Я действительно хочу, чтобы это было в CSS.

Также на снимках я'м пытаюсь работать с можно найти здесь.

Программирование
image text css mouseover
4-го января 2013 в 12:15
29 просмотров
Комментарии к вопросу (1)
Решение

Это с помощью:pseudoelement наведении на CSS3.

HTML-код:

<div id="wrapper">

    <p class="text">text</p>
</div>​

Усс:

#wrapper .text {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

#wrapper:hover .text {
visibility:visible;
}

Демо [здесь][1].

Это способ достичь того же результата с помощью jQuery:

HTML-код:

<div id="wrapper">

    <p class="text">text</p>
</div>​

Усс:

#wrapper p {
position:relative;
bottom:30px;
left:0px;
visibility:hidden;
}

код jQuery:

$('.hover').mouseover(function() {
  $('.text').css("visibility","visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility","hidden");
});

Вы можете поместить код jQuery, где вы хотите, в корпус HTML-страницы, то вам нужно включить библиотеку jQuery в голова как это:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Вы можете посмотреть демо-версию [здесь][2].

Когда вы хотите использовать его на вашем сайте, просто измените <ИМГ СРЦ /> значение и вы можете добавить несколько изображений и надписей, просто скопируйте формат я: вставить изображение с класс=то"парить" В и Р С класс=то"текст"в

Fabio
Редактировал ответ 4-го января 2013 в 1:06
Комментарии (2)

Вот один из способов сделать это с помощью CSS

В формате HTML

<div class="imageWrapper">

    <a href="http://google.com" class="cornerLink">Link</a>
</div>​

УСБ

.imageWrapper {
    position: relative;
    width: 300px;
    height: 300px;
}
.imageWrapper img {
    display: block;
}
.imageWrapper .cornerLink {
    opacity: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 2px 0px;
    color: #ffffff;
    background: #000000;
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;

}
.imageWrapper:hover .cornerLink {
    opacity: 0.8;
}

[Демо][1]

Или если вы просто хотите его в нижнем левом углу:

[Демо][2]

Комментарии (5)