bunu nasıl yapabilirim

28-03-2019, 14:57:57

herkese selamlar
https://demo1.leotheme.com/leo_bibom.../6-accessories

yukardaki sitedeki ürünün üzerine gelince sepete at büyüt gibi simgeler cıkıyor bunu nasıl yapabilirim ama sunu göz önünde bulundurun resmin en kösesinede gelse maus ortasınada gelse simgeler ortada cıkıyor onu nasıl yapabilirim yani resmin üzerine gelince simgeleri nasıl cıkartabilrim bir yöntem var mı

şimdiden yardım eden herkese teşekkürler

28-03-2019, 15:06:59

#2

picpoket

Hocam sadece css kullanmanız dahi yeterl olacaktır;

Bunları normal olarak ayrı bir div içerisine koyuyorsunuz position absolute ile üzerine getirin daha sonra bunu standart olarak display:none yapın ürünün olduğu kutunun :hover'ına display:block komutu koyarsanız istediğinize ulaşabilirsiniz + olarak bu olayı animate bile edebilirsiniz.

28-03-2019, 15:10:28

#3

Onur89TR

Ürünlerin class'ı ".urun" olsun. İçindeki linkler ".detay a"...

.urun { position: relative; z-index: 1; }

Ortalanan kısım ".detay" olsun.

.detay { z-index: 2; position: absolute; top: 100px; visibility: hidden; opacity: 0; transition: opacity .5s; text-align: center; }

detay divi içerisinde ise ikonlar olacak. Tercihini font awesome den yana kullanabilirsin, sana kalmış.

.detay a { color: white; background-color: gray; border-radius: 50%; width: 25px; height: 25px; line-height: 25px; text-align: center; padding: 5px; margin: 0 3px; }

Ürüne hover yapınca detay açılsın:

.urun:hover .detay { visibility: visible; opacity: 1; }

28-03-2019, 15:16:57

#4

ozgun58

picpoket adlı üyeden alıntı: mesajı görüntüle

Hocam sadece css kullanmanız dahi yeterl olacaktır;

Bunları normal olarak ayrı bir div içerisine koyuyorsunuz position absolute ile üzerine getirin daha sonra bunu standart olarak display:none yapın ürünün olduğu kutunun :hover'ına display:block komutu koyarsanız istediğinize ulaşabilirsiniz + olarak bu olayı animate bile edebilirsiniz.

öncelikle zaman ayırıp yardım etmeye calıştığınız için teşekkürler hocam aklıma bir şey geldi öyle deneyip olmazsa sizden daha detaylı bilgi isteyeceğim teşekkür ederim

28-03-2019, 15:18:05

#5

~~by_karahan~~

Üyeliği durduruldu

https://bootsnipp.com/snippets/7X8m2

28-03-2019, 15:18:19

#6

ozgun58

Onur89TR adlı üyeden alıntı: mesajı görüntüle

Ürünlerin class'ı ".urun" olsun. İçindeki linkler ".detay a"...

.urun { position: relative; z-index: 1; }

Ortalanan kısım ".detay" olsun.

.detay { z-index: 2; position: absolute; top: 100px; visibility: hidden; opacity: 0; transition: opacity .5s; text-align: center; }

detay divi içerisinde ise ikonlar olacak. Tercihini font awesome den yana kullanabilirsin, sana kalmış.

.detay a { color: white; background-color: gray; border-radius: 50%; width: 25px; height: 25px; line-height: 25px; text-align: center; padding: 5px; margin: 0 3px; }

Ürüne hover yapınca detay açılsın:

.urun:hover .detay { visibility: visible; opacity: 1; }

öncelikle zaman ayırıp yardım etmeye calıştığınız için teşekkürler hocam aklıma bir şey geldi sizin kine yakın öyle deneyip olmazsa sizden daha detaylı bilgi isteyeceğim teşekkür ederim

by_karahan adlı üyeden alıntı: mesajı görüntüle

https://bootsnipp.com/snippets/7X8m2

ilginden dolayı teşekkürler hocam