나는 작은 상자가 얻으려고 하고 나타나는 경우 마우스 왼쪽 아래에 놓인 이미지의 때는기대어. 상자 안에 다른 페이지로 링크를 있을 수 있다.
[Here] (http://theme-frsch2.tumblr.com/) 은 작은 상자 수 있지만, 내가 원하는 것과 비슷합니다 연결되지 않은 국경 이미지를 삭제합니다.
또한 이미지 I& 하는 korea. 작동합니까 # 39 m, [여기서요.] (http://silentthemes.tumblr.com)
이는 '에서' 싸이도르망 사용하여 떠 있는 css3.
<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;
}
데모 [HERE] [1].
<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;
}
$('.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>
[HERE] [2] 데모를 볼 수 있습니다.
정보기술 (it) 을 사용할 경우 웹 사이트에 ',' 그냥 변경하십시오 <, img src /> 여러 이미지를 추가할 수 있습니다, 그냥 내가 복사합니다를 형식 및 캡션에 가치와 사용합니다. 'p', '와 함께 사용하여 이미지를 삽입하십시오 class = " hover" class = " text"';;
다음은 사용 할 수 있는 방법 중 하나는 이 css
<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;
}
이 경우 또는 그냥 왼쪽 하단에 있는: