Efekt wysuwanego tekstu

Witam w swoim projekcie mam podobny efekt jak na tej stronie 

https://helpx.adobe.com/pl/flash.html  - "materiały do nauki" te kafelki.

Jak można taki efekt uzyskać? Jak pociąć ten element w projekcie? 

Możecie jakoś nakierować mnie? 
 

Chodzi ci o tą najzwyklejszą zmianę wysokości z efektem hover + transition?

Tak chodzi mi o efekt tych boxów, w materiały do nauki. I nie wiem jak pociąć mój projekt żeby dało się dobrze to zakodować

Może dla kogoś to łatwe, ale ja zaczynam dopiero tą czarną stronę dla grafika

tak wygląda mój projekt ( i jak mam pociąć te boxy w photoshopie?) 

W zasadzie możesz się wzorować na strukturze html z linka, który podałeś. Czyli jeden, pojedynczy element z portfolio ma postać typu:

 

<a>
   <img />
   <div>
      <h2></h2>
      <h3></h3>
   </div>
</a>

I potem hover dla <a> podnośi tego diva wewnętrzenego (margin-top: -20px na przykład).

Tak w duży skrócie, próbuj i wrzucaj demo na http://jsfiddle.net/ i linka tutaj. Będziemy pomagać.

UPDATE: 
Możesz przykozaczyć i iść w efekty tego typu: http://tympanus.net/...cts/index2.html

A muszę to jakość pociąć w photoshopie? Jeśli tak to mozecie zaznaczyć na screenie jak umieścić plasterki. 

Aha. Mi się to cięcie layoutów nigdy nie podobało i uważam, że w tak prostych konstrukcjach jest po prostu bez sensu. Jak widzę coś tak prostego to kod HTML sam mi się w głowie układa.

Nie wiem jak ci mogę pomóc.

Tutaj jest ten efekt: http://jsfiddle.net/writen/3sq4jzga/1/

A muszę to jakość pociąć w photoshopie? Jeśli tak to mozecie zaznaczyć na screenie jak umieścić plasterki. 

Nie nie. Nie polecam w ogóle korzystania z tej opcji. Ja w PS sprawdzam tylko kolory i rozmiary. Reszta tak jak napisał writen w głowie. 

No ja własnie się zastanawiam, czy ktoś w ogóle korzysta z tej opcji cięcia w PS'ie? Ja nigdy nie korzystałem i uważam ją za zbędną, ale zawsze myślałem że komuś się to przydaje.

No niestety, ale wszystkie te zautomatyzowane procesy mają dużo wad  

Okej okej to nie bede ciął tylko bede patrzył jak to wszystko ma wyglądać, jak zrobie, to wrzuce tutaj link do strony i zobaczymy jak wyjdzi mi ten efekt 

http://project.krystianjarzebski.pl/  Wkleiłem kod który podał mi writen, teraz jak to zrobić zeby to było pod tym obrazkiem? 

Wcześniej zły link chyba wkleiłem. Miałem ci dać to http://jsfiddle.net/writen/3sq4jzga/3/

Możesz sobie zmniejszyć wysokość całego boxa, albo nadać jakąś wysokość dla div'a .desc

Ogólnie jest okej o taki efekt mi chodziło. Tylko widzicie w moim projekcie jest tak, ze jest np. button od "pliki do druku" i jak ktoś na to kliknie to wtedy wysunie się tekst. Jak zrobić ten button przed wysunięciem się tekstu, no i jak wrzucić to wszystko już pod obrazek. Tylko to sprawia mi trudność w tym całym projekcie z resztą sobie powinienem dać radę. 

Czyli potrzebujesz ten efekt po kliknięciu dopiero? To już by trzeba chyba jakiegoś javascripta zaciągnąć. slideToogle() w jQuery?

No nie wiem czy dobrze rozumiem.

Ja właśnie też patrzę na projekt i nie bardzo wiem o co chodzi z tym przyciskiem.

Chodzi o to że box webdesign to już hover 

a te trzy pozostałe to są boxy, przed kliknięciem. 

Chodzi o to że box webdesign to już hover 

a te trzy pozostałe to są boxy, przed kliknięciem. 

Przed kliknięciem, czy przed najechaniem? 

Można zrobić efekt przed najechaniem lepiej bedzie to wygladało 

Wrzucam wam teraz na serwer jak to wszystko wygląda 

http://project.kryst...njarzebski.pl/ 

Musiałem też zmienić ustawienia w css'ie dla obrazka, poniewaz jak był w sekcji body, to ustawiał się dla całej strony i jak przewijałem strone w dół to obrazek też od razu a chciałem zrobić zeby zostawał na górze. 

Wiec zmieniłem 

 body na .header (class) ustawiłem do niego klase, i teraz jak widać obrazek wychodzi poza kadr ekranu (moja rozdziałka 1920x1080). 

a kod do tego wygląda tak. 

.header img {
    background-image: url(../img/images/pic01.jpg) no-repeat center center ;
	display: block;
	height: 914 px;
	width: 1900 px;

	
}

No ja nie wiem jaki konkretnie efekt chcesz uzyskać, ale w obecnej formie wszystko będzie nie tak.

Zrób header z tłem, bez tego elementu img i to menu też wrzuć do headera.

Zonic ci wcześniej podał kod to wystraczyło ten fixed usunąć.

I jak efekty? Poradziłeś sobie? Bo na linku dema za wiele nie ma.

Musiałem chwile odłożyć kodowanie, ponieważ zlecenia musze wykonać