Я пытаюсь сделать небольшое окно в нижней-левой части изображения, когда мышь перемещается над ним. Внутри коробки там будет ссылка на другую страницу.
Здесь чем-то напоминает то, что я хочу, но коробка должна быть меньше и не подключена к границе изображения.
Я'пробовала все и могу'т найти ответ. И я Дон'т хотите использовать подсказки, не говоря уже о том, что у меня нет никаких JavaScript знания. Я действительно хочу, чтобы это было в CSS.
Также на снимках я'м пытаюсь работать с можно найти здесь.
Это с помощью:pseudoelement наведении на CSS3.
HTML-код:
<div id="wrapper">
<img src="http://placehold.it/300x200" class="hover" />
<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">
<img src="http://placehold.it/300x200" class="hover" />
<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 в голова как это:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Вы можете посмотреть демо-версию [здесь][2].
Когда вы хотите использовать его на вашем сайте, просто измените <ИМГ СРЦ />
значение и вы можете добавить несколько изображений и надписей, просто скопируйте формат я: вставить изображение с класс=то"парить"
В и Р С класс=то"текст"
в
Вот один из способов сделать это с помощью CSS
В формате HTML
<div class="imageWrapper">
<img src="http://lorempixel.com/300/300/" alt="" />
<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]