Pozicioniranje fa ikona na hover-u

1

Pozicioniranje fa ikona na hover-u

offline
  • Pridružio: 02 Apr 2006
  • Poruke: 43

Napisano: 22 Feb 2016 17:16

Pozdrav momci... Jel moze mala pomoc posto je ocigledno nakon 3 sata pala koncentracija Smile

Naime hteo bih da pozicioniram ove 2 fa ikonice na sredini pri hover efektu (moze i bez hovera buduci da je nevidljiv dok se ne hover-uje) Probao sam sve sto mi je palo na pamet, jednostavno ne ide. Mozda neko uoci gde sam pogresio...

js fiddle link je jsfiddle.net/sparkyvr/ggp9tsom/

snapshot PSD-ja : prntscr.com/a6kgqo

Castim pivo kad nadjemo Smile

Dopuna: 22 Feb 2016 17:53

Ovako radi mada nisam neki fan max-height-a ali sta je tu je..

jsfiddle.net/sparkyvr/ggp9tsom/1/



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

<i class="fa fa-search-plus"></i>

  padding-top: 25%;

Moze li ovako?



offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Ono sto hocu da ti kazem npr fa {     display: inline-block;     font: normal normal normal 14px/1 FontAwesome;     font-size: inherit;     text-rendering: auto;     -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale;     padding-top: 25%; }

Da ne bi sve iconice bile padding-top 25%. Definises na kom delu sajta se odnosi fa iconica. Javi ako ne radi

offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

Npr ovako .falink .fa {     padding-top: 25%; } whether it is ok Smile





offline
  • Pridružio: 02 Apr 2006
  • Poruke: 43

Vizuelno to je to, probao sam, nervira me sto se cursor:pointer; pali i kad nije bas na ikonicama zbog paddinga, znaci ide skroz do gore.. Sta znam, nisam neki vizuelni guru i onako, a sigurno je bolje od fiksirane visine i margine od 120px Very Happy Mada moracu da se ratosiljam border-a definitivno

Ostavicu ovako, ipak je kad se izvaga bolje resenje. Hvala na pomoci, dodjem pivo Smile

Modovi, case closed, finito.


Ispravka, evo ga full resenje, umesto padding-top: 25% ide margin-top: 25%.. Sad ide i border.

jsfiddle.net/sparkyvr/ggp9tsom/2/

offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15754
  • Gde živiš: Majur (Colosseum)

Pa ako hoces da ti se kursor pointer pojavljuje samo kada hoveruje iskonice (na stranu sto ne razumem zasto bi to hteo) onda stavi

#portfolio .portfolio-thumb:hover .portfolio-overlay {  cursor: default; }

a na ikonice stavi pointer:

.portfolio-overlay a .fa{  cursor: pointer!important;  }

offline
  • Pridružio: 02 Apr 2006
  • Poruke: 43

m4rk0 ::Pa ako hoces da ti se kursor pointer pojavljuje samo kada hoveruje iskonice (na stranu sto ne razumem zasto bi to hteo) onda stavi

#portfolio .portfolio-thumb:hover .portfolio-overlay {  cursor: default; }

a na ikonice stavi pointer:

.portfolio-overlay a .fa{  cursor: pointer!important;  }


Reseno vec ali hvala u svakom slucaju jsfiddle.net/sparkyvr/ggp9tsom/3/

offline
  • Pridružio: 25 Mar 2015
  • Poruke: 548

sparkyvr ::Vizuelno to je to, probao sam, nervira me sto se cursor:pointer; pali i kad nije bas na ikonicama zbog paddinga, znaci ide skroz do gore.. Sta znam, nisam neki vizuelni guru i onako, a sigurno je bolje od fiksirane visine i margine od 120px Very Happy Mada moracu da se ratosiljam border-a definitivno

Ostavicu ovako, ipak je kad se izvaga bolje resenje. Hvala na pomoci, dodjem pivo Smile

Modovi, case closed, finito.


Ispravka, evo ga full resenje, umesto padding-top: 25% ide margin-top: 25%.. Sad ide i border.

https://jsfiddle.net/sparkyvr/ggp9tsom/2/



Pozdrav

Ja sam uradio ovako ako hoces da se malo razdvoji thumbs -slike npr




#portfolio .portfolio-thumb .portfolio-overlay {     position: absolute;     top: -5px;     right: 0;     bottom: 0;     left: -5px;     background: #2cacf8;     opacity: 0;     width: 100%;     height: 100%;     -webkit-transition: all 0.4s ease-in-out;     -o-transition: all 0.4s ease-in-out;     -moz-transition: all 0.4s ease-in-out;     transition: all 0.4s ease-in-out; } .portfolio-thumb, .portfolio-overlay {     max-width: 450px;     margin: 5px; } .falink .fa {     margin-top: 20%;     border-width: 2px;     border-style: solid;     border-color: #fff;     padding: 10px; }

Sve najbolje pozdrav

offline
  • Pridružio: 02 Apr 2006
  • Poruke: 43

Nisam hteo da otvaram novu temu, iskreno ne znam da li da se smejem ili da placem... Jedna nasa firma inace, necu da pricam koja...Bitno da su ovo uslovi za prostu praksu od mesec dana koju su oni meni mogli da ponude trenutno...

prnt.sc/acw7ig

Vidim ja da sam zestoko zastareo sa znanjem... Dajte neke kurseve, tutoriale ili slicno.. Very Happy

offline
  • Pridružio: 02 Sep 2003
  • Poruke: 4772

https://www.udemy.com

Ko je trenutno na forumu
 

Ukupno su 1210 korisnika na forumu :: 36 registrovanih, 5 sakrivenih i 1169 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 1798 - dana 19 Sep 2019 18:42

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: _Sale, A.R.Chafee.Jr., amaterSRB, Bane san, blake, Buzdovan, calvi, celik, cole77, d bos, darcaud, Dorcolac, Drug pukovnik, Eyes Wide Shut, FOX, Futurama, Georgius, ILGromovnik, knell, Koca Popovic, Kubovac, luka1978, Marko Marković, Mercury2, Milan A. Nikolic, Milos ZA, Nebo_M, radoznao2, ruger357, stug, suton2, Toni, versus2, VJ, vukdra, xandar