0
Kayıt Ol

Bu Tasarımı Nasıl Yaparız

8

●

222

  • 27-03-2021, 23:56:36
    #1
    yazarbey
    yazarbey
    Merhaba. https://zeo.org/tr/ekibimiz/ buradaki fotoğraflarda olan ve farenin hareketine göre değişen tasarımı nasıl yaparız. Wp için bu tarzda bir eklenti var mı acaba?
  • Kabul Edilen Cevap
    • webkit
      2 Beğeni
      Mesaja Git 
      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
.card {
width: 130px;
height: 195px;
position: relative;
display: inline-block;
margin: 50px;
}
.card .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.card:hover .img-top {
display: inline;
}
</style>
</head>
<body>
<div class="card">
    <img src="/examples/images/card-back.jpg" alt="Card Back">
<img src="/examples/images/card-front.jpg" class="img-top" alt="Card Front">
</div>
</body>
</html>
      Canlı : https://www.tutorialrepublic.com/cod...-swap-on-hover
  • 27-03-2021, 23:58:00
    #2
    Siteperformans
    Siteperformans
    Hahaha çok iyi
  • 27-03-2021, 23:59:00
    #3
    Kara
    Kara
    yazarbey adlı üyeden alıntı: mesajı görüntüle
    Merhaba. https://zeo.org/tr/ekibimiz/ buradaki fotoğraflarda olan ve farenin hareketine göre değişen tasarımı nasıl yaparız. Wp için bu tarzda bir eklenti var mı acaba?
    Css kodlari ile yapilabilir hocam fakat wpde boyle bir eklenti oldugunu dusunmuyorum.
  • 27-03-2021, 23:59:59
    #4
    SwarTLine
    SwarTLine
    Gerçekten çok iyi kediye bayıldım 😂😂😂
  • 28-03-2021, 00:00:16
    #5
    Fahrettin
    Fahrettin
    Danışman
    yazarbey adlı üyeden alıntı: mesajı görüntüle
    Merhaba. https://zeo.org/tr/ekibimiz/ buradaki fotoğraflarda olan ve farenin hareketine göre değişen tasarımı nasıl yaparız. Wp için bu tarzda bir eklenti var mı acaba?
    Kedi çok iyi olmuş. Sanatçı ruhlu webmaster tasarımı.
  • 28-03-2021, 00:06:24
    #6
    Kara
    Kara
    Pardon hocam telefondan bakinca yanlis anlamisim sadece resimlere tiklayinca kafalari donuyor sandim belki gercekten css ile yapilabilir ama konuya hakim degilim sadece yanlis anlamisim yanlis bilgi aktarmak istemem kusura bakmayin.
  • 28-03-2021, 00:13:58
    #7
    kadir-kara
    kadir-kara
    Bu istediğin ekip sayfasını Türkiye'de belki de ilk ben yapmışımdır. 2014 yılında büyük bir fotoğraf firmasının kurduğu düşük işler için faaliyete geçirdiği ajans için kurumsal kimlik çalışması ve web sitesi tasarımı yapmıştım. Ekip sayfasını da aynı bu şekilde tasarlamıştım, Türkiye'de böyle bir ekip sayfası sahip kimse yoktu. Yazılımsal olarak sana bir fikir verir mi bilmiyorum ama ben tüm ekip fotoğraflarını aşağıdaki gibi teslim etmiştim yazılımcıya, bir fotoğraf içerisinde tüm fotoğraflar yer her açıya göre yer alıyordu ve CSS ile mouse konumuna göre ortada belirlenen karede gözüküyordu. (:

  • 28-03-2021, 00:22:26
    #8
    ByHickimse
    ByHickimse
    kadir-kara adlı üyeden alıntı: mesajı görüntüle
    Bu istediğin ekip sayfasını Türkiye'de belki de ilk ben yapmışımdır. 2014 yılında büyük bir fotoğraf firmasının kurduğu düşük işler için faaliyete geçirdiği ajans için kurumsal kimlik çalışması ve web sitesi tasarımı yapmıştım. Ekip sayfasını da aynı bu şekilde tasarlamıştım, Türkiye'de böyle bir ekip sayfası sahip kimse yoktu. Yazılımsal olarak sana bir fikir verir mi bilmiyorum ama ben tüm ekip fotoğraflarını aşağıdaki gibi teslim etmiştim yazılımcıya, bir fotoğraf içerisinde tüm fotoğraflar yer her açıya göre yer alıyordu ve CSS ile mouse konumuna göre ortada belirlenen karede gözüküyordu. (:

    harika bir çalışma yapmışsınız gerçekten hocam.
  • 28-03-2021, 00:24:51
    #9
    Bu cevap, konu sahibi tarafından kabul edilebilir bir cevap olarak işaretlendi.
    webkit
    webkit 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
.card {
width: 130px;
height: 195px;
position: relative;
display: inline-block;
margin: 50px;
}
.card .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.card:hover .img-top {
display: inline;
}
</style>
</head>
<body>
<div class="card">
    <img src="/examples/images/card-back.jpg" alt="Card Back">
<img src="/examples/images/card-front.jpg" class="img-top" alt="Card Front">
</div>
</body>
</html>
    Canlı : https://www.tutorialrepublic.com/cod...-swap-on-hover