Görsellerin Üstüne Fare Getirince İndirme Butonu Çıkarmak

DarkLightning · 17 Mayıs 2016

Siteme ekteki gibi bir özellik eklemek istiyorum. Kısaca açıklamak gerekirse, bu özellik bir HTML kodu şeklinde yapılacak. Yani, HTML kodu içerisinde bir resim ve butonların linklerini yazabileceğim kısımlar olacak. Kullanıcı bu resim'in üzerine mouse'u getirdiğinde düğmeler gözükecek. Ekteki resimler daha iyi anlatıyor.

Vafla · 4 Haziran 2016

Edit fiddle - JSFiddle

Düzenleme: Link düzeltildi.

İbrahim Göksoy · 4 Haziran 2016

@Vafla Paylaştığın link galiba bozuk, baktığımda 404 veriyor.

Vafla · 4 Haziran 2016

Özür dilerim, yanlış link atmışım. Az önce düzelttim, uyarı için teşekkürler.

DarkLightning · 5 Haziran 2016

Beyler ben html, php 'den pek anlamıyorumda Data Life Engine kullanıyorum. Acaba nasıl ekleyebilirim bu özelliği?

ejderya · 30 Haziran 2016

Yeni bişeyler yapmaya çalıtım. Baya stabil oldu bence. Konuya eklede herkes görsün.
Önizleme: PzmWjp
Kodlar- HTML:

Kod:

<div class="resim">
        <img src="http://i.hizliresim.com/pPMNBL.jpg" alt="resim" />
        <div class="indir">
            <a href="#"><img src="http://i.hizliresim.com/govYZ2.png" alt="indir" ></a>
      <p>İNDİRMEK İÇİN TIKLA</p>
        </div>
    </div>

Kodlar - CSS:

Kod:

.resim{
    width:512px;
    height:512px;
  position:relative;
}
.indir{
    width:128px;
    height:128px;
  position:absolute;
  top:50%;
  left:50%;
transform: translate(-50%, -50%)
}
.indir{
    opacity:0;
  transition:opacity 0.5s;
}
.resim:hover .indir{
    opacity:1;
}
p{
  text-align:center;
}

İbrahim Göksoy · 1 Temmuz 2016

Gerçekten güzel olmuş.

Görsellerin Üstüne Fare Getirince İndirme Butonu Çıkarmak

Ayrıntılı düzenleme

DarkLightning

Hectopat

Vafla

Hectopat

İbrahim Göksoy

Megapat

Vafla

Hectopat

DarkLightning

Hectopat

ejderya

Hectopat

İbrahim Göksoy

Megapat

Benzer konular

Bu konuyu görüntüleyen kullanıcılar

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz