Fare bir resmin üzerine geldiğinde resmin sol alt tarafında küçük bir kutunun görünmesini sağlamaya çalışıyorum. Kutunun içinde farklı bir sayfaya bağlantı olacak.
Burada istediğime biraz benziyor, ancak kutu daha küçük olacak ve görüntünün kenarlığına bağlı olmayacak.
Her şeyi denedim ama bir cevap bulamadım. Ve tooltip kullanmak istemiyorum, javascript bilgim olmadığı gerçeğini bir kenara bırakın. Bunun gerçekten CSS olmasını istiyorum.
Ayrıca üzerinde çalıştığım resimler burada bulunabilir.
Bu, CSS3'teki :hover
sözde öğesini kullanır.
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;
}
Demo [BURADA][1].
Bunun yerine jquery kullanarak aynı sonucu elde etmenin bir yoludur:
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 kodu:
$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
});
$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");
});
Jquery kodunu istediğiniz yere, HTML sayfasının body kısmına koyabilirsiniz, ardından jquery kütüphanesini head kısmına şu şekilde eklemeniz gerekir:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Demoyu [BURADA][2] görebilirsiniz.
Web sitenizde kullanmak istediğinizde, sadece <img src />
değerini değiştirin ve birden fazla resim ve başlık ekleyebilirsiniz, sadece kullandığım formatı kopyalayın: class="hover"
ile resim ve class="text"
ile p ekleyin
İşte bunu css kullanarak yapmanın bir yolu
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;
}
[Demo][1]
Ya da sadece sol alt köşede olmasını istiyorsanız:
[Demo][2]