Caption Hover Effect


0

Здравейте колеги,

Сигурно от 4-5 часа си блъскам главата с един hover effect и не мога да го направя. Резултатът, който трябва да се получи е този http://prikachi.com/images/793/6560793G.png . Ето и част от кода http://codepen.io/anon/pen/FHmEt. Така изглежда частта от дизайна за отбора http://prikachi.com/images/975/6560975D.png Надявам се някой, ако може да ми помогне.

Поздрави,

Даниел

 

П.С.:Ако може варианта да е responsive




Отговори



0
0votes
 

Здравей!


Според мен трябва да сложиш в css-a:
////
.team-wrap .span4 a 
{
  position: relative;
  top: -15px;
}
////
Да си намалиш width % защото бутоните са счупени!

.row-fluid .span4
{
    width: 28.915%;

 

}
////
Мисля че това ще фиксне проблема, а относно респонсиве
и аз трябва да прочета това онова, но като цяло е хубаво че работиш с % защото: 
 За да  ти е респосиве е по-добре защото ти зима процентната височина и шорочина на дисплея и спрямо нея позиционира ... да кажем 25% ширина ... Ako desktopa ти е с 1000x700 ти го дели  на 250px ... реално 4x25% широчина ти дават 100% koeto е 1000px ;)

Сьщо така разгледаи тук мойе да има полезни работи: http://tympanus.net/codrops/2013/06/18/caption-hover-effects/
 

 


от HoshirO (0 точки)


1

Понеже питането ти е основно за hover effect-a, той ще се получи така:
 

.memb-nam:hover {

background: #E8645B;

border-bottom-color: #E25048; 

text-decoration: none;

}

А за да наместиш бутона, аз бих направила така:

 

.memb-nam {

display: block;

margin: -20px auto;

width: 50%; /*или колкото ти трябват*/

}


от Yoana_Nikolova (0 точки)