Pozicioniranje fa ikona na hover-u

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Napisano: 22 Feb 2016 17:16

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

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

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/

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

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

  padding-top: 25%;

Moze li ovako?

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

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

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

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

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

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 Mada moracu da se ratosiljam border-a definitivno

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

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/

• 1Ovo se svidja korisniku: dejnik978
  
  Registruj se da bi pohvalio/la poruku!

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;  }

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

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/

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

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 Mada moracu da se ratosiljam border-a definitivno

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

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

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

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..

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

https://www.udemy.com