Hover zoom efekti hakkında yardım.

26.01.2017 23:36

wpuzman WordPress Developer Kullanıcı

Üyelik 13.01.2017
Yaş/Cinsiyet 33 / E
Meslek Yazılım
Konum Trabzon

Ad Soyad B** M**
Mesajlar 2771
Beğeniler 293 / 949
Ticaret 33, (%100)

Merhaba. http://bilimokur.com bloğumda son yazılardaki küçük resmin üzerine gelince zoom yapması için aşağıdaki kodu yazdım.

.attachment-featured.size-featured.wp-post-image {

  -moz-transition: all 0.3s;

  -webkit-transition: all 0.3s;

  transition: all 0.3s;

}

.attachment-featured.size-featured.wp-post-image:hover {

transform: scale(1.1);

}

fakat resim olduğu bölgeden dışarıya taşıyor. yani çerçeve sabit kalsın sadece içerisi zoom yapsın istiyorum. Yardımlarınızı bekliyorum şimdiden teşekkürler.

Udemy Wordpress Tema Yapımı Kursum

27.01.2017 00:09

#2

fullstackdev WM Aracı Kullanıcı

Üyelik 25.06.2016
Yaş/Cinsiyet 37 / E
Meslek full stack developer
Konum İstanbul Avrupa

Ad Soyad S** Ç**
Mesajlar 334
Beğeniler 35 / 93
Ticaret 0, (%0)

hocam tam yapini bilmiyorum ama disina bir div koy eger yoksa; sonra div e overflow:hidden ver.. bi ornek hazirladim isini gorurse bilimokur
https://jsfiddle.net/onurcelik/nxo73L9j/1/

1 kişi bu mesajı beğendi.

27.01.2017 00:20

#3

wpuzman WordPress Developer Kullanıcı

Üyelik 13.01.2017
Yaş/Cinsiyet 33 / E
Meslek Yazılım
Konum Trabzon

Ad Soyad B** M**
Mesajlar 2771
Beğeniler 293 / 949
Ticaret 33, (%100)

Hocam zaten dışında div varmış. Şu şekilde düzenledim kendime göre ama garip birşey oldu :)

@keyframes zoomYapBaba {

    from {width:180px; height:180px;}

    to {width:190px; height:190px;}

}



@keyframes zoomOutBaba {

    from {width:190px; height:190px;}

    to {width:180px; height:180px;}

}





.attachment-featured.size-featured.wp-post-image{

    width:180px;

    height:180px;

    animation:zoomOutBaba;

    animation-duration: 0.4s;

}





.attachment-featured.size-featured.wp-post-image:hover{

    animation:zoomYapBaba;

    animation-timing-function: ease-out;

    animation-duration: 0.4s;

    width:180px;

    height:180px;

}





#page .featured-thumbnail {

    width:180px;

    height:180px;

    overflow:hidden;

}

Udemy Wordpress Tema Yapımı Kursum

27.01.2017 00:24

#4

TEHET ✨ Kullanıcı

Üyelik 04.10.2014
Yaş/Cinsiyet 32 / E
Meslek Tasarımcı
Konum Ankara

Ad Soyad M** A**
Mesajlar 791
Beğeniler 96 / 374
Ticaret 1, (%100)

.featured-thumbnail koduda overflow:hidden ekle.

.attachment-featured.size-featured.wp-post-image koduna da transition: 250ms eklersen efekt daha güzel olur.

1 kişi bu mesajı beğendi.

27.01.2017 00:26

#5

wpuzman WordPress Developer Kullanıcı

Üyelik 13.01.2017
Yaş/Cinsiyet 33 / E
Meslek Yazılım
Konum Trabzon

Ad Soyad B** M**
Mesajlar 2771
Beğeniler 293 / 949
Ticaret 33, (%100)

.featured-thumbnail kodunda overflow:hidden zaten var ama.

Udemy Wordpress Tema Yapımı Kursum

27.01.2017 00:30

#6

TEHET ✨ Kullanıcı

Üyelik 04.10.2014
Yaş/Cinsiyet 32 / E
Meslek Tasarımcı
Konum Ankara

Ad Soyad M** A**
Mesajlar 791
Beğeniler 96 / 374
Ticaret 1, (%100)

Tekrar kontrol edin isterseniz?

1 kişi bu mesajı beğendi.

27.01.2017 00:33

#7

wpuzman WordPress Developer Kullanıcı

Üyelik 13.01.2017
Yaş/Cinsiyet 33 / E
Meslek Yazılım
Konum Trabzon

Ad Soyad B** M**
Mesajlar 2771
Beğeniler 293 / 949
Ticaret 33, (%100)

O şekilde yapmıyorum ben. Google chrome un canlı css düzenleyici eklentisiyle yapıyorum.

Udemy Wordpress Tema Yapımı Kursum

27.01.2017 01:11

#8

wpuzman WordPress Developer Kullanıcı

Üyelik 13.01.2017
Yaş/Cinsiyet 33 / E
Meslek Yazılım
Konum Trabzon

Ad Soyad B** M**
Mesajlar 2771
Beğeniler 293 / 949
Ticaret 33, (%100)

fullstackdev hocam şöyle birşey denedim bu sefer de sağ alttan sabit kalıyor üstten oynuyor.

#page .featured-thumbnail {
  position: relative;
  overflow: hidden;
  height: 180px;
  width: 180px;
}

.attachment-featured.size-featured.wp-post-image {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.attachment-featured.size-featured.wp-post-image:hover  {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Udemy Wordpress Tema Yapımı Kursum

27.01.2017 10:27

#9

HapyMan Full Stack Developer Kullanıcı

Üyelik 14.05.2016
Yaş/Cinsiyet 32 / E
Meslek What do you do exactly ?
Konum İstanbul Avrupa

Ad Soyad T** T**
Mesajlar 561
Beğeniler 171 / 208
Ticaret 0, (%0)

scss version : ( güncellendi )
https://jsfiddle.net/tombastaner/Lp88qnwd/13/

1 kişi bu mesajı beğendi.

27.01.2017 13:29

#10

wpuzman WordPress Developer Kullanıcı

Üyelik 13.01.2017
Yaş/Cinsiyet 33 / E
Meslek Yazılım
Konum Trabzon

Ad Soyad B** M**
Mesajlar 2771
Beğeniler 293 / 949
Ticaret 33, (%100)

HapyMan çerçeve sabit kalmıyor. alttan oynuyor.

Udemy Wordpress Tema Yapımı Kursum

Hover zoom efekti hakkında yardım.

Üye Girişi Yap