Текст на изображении мыши?

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

Здесь немного похож на то, что я хочу, но ящик меньше и не связан с границей изображения.

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

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

Ответы

Ответ 1

Это использует псевдоэлемент :hover в CSS3.

HTML:

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>​

CSS

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

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

Демо ЗДЕСЬ.

Это вместо этого способ достижения одного и того же результата с помощью jquery:

HTML:

<div id="wrapper">
    <img src="http://placehold.it/300x200" class="hover" />
    <p class="text">text</p>
</div>​

CSS

#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 в head следующим образом:

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

Вы можете увидеть демонстрацию ЗДЕСЬ.

Если вы хотите использовать его на своем веб-сайте, просто измените значение <img src />, и вы можете добавить несколько изображений и титров, просто скопируйте формат, который я использовал: вставьте изображение с помощью class="hover" и p с помощью class="text"

Ответ 2

Вот один из способов сделать это, используя css

HTML

<div class="imageWrapper">
    <img src="http://lorempixel.com/300/300/" alt="" />
    <a href="http://google.com" class="cornerLink">Link</a>
</div>​

CSS

.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;
}

Демо

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

Демо

Ответ 3

Использовать :hover::before псевдокласса

.round-pic2:hover::before{
    content: 'text';
    position: relative;
    top: 60px;
    left: 50px;
    width: 30px;
    height: 20px;
    text-align: center;
    display: inline-block;
}

JSFiddle