Как осуществить данный hover эффект?

Спасибо большое) А почему не работает наложение градиента?
background: linear-gradient(to top, #f38181, #fce38a);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f38181), to(#fce38a));
background: -webkit-linear-gradient(top, #f38181, #fce38a);
background: -moz-linear-gradient(top, #f38181, #fce38a);
background: -o-linear-gradient(top, #f38181, #fce38a);
background: -ms-linear-gradient(top, #f38181, #fce38a);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#f38181', endColorstr='#fce38a', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f38181',endColorstr='#fce38a')";

NoNIDs, зачем столько... вполне хватит и одного раза:

background: linear-gradient(to top, #f38181, #fce38a);

Работает все. Видимо где-то у вас переопределяется это свойство.
Так чтоб не искать - можете попробовать:

background: linear-gradient(to top, #f38181, #fce38a)!important;

Но это плохая практика, лучше найти переопределение.
В хроме F12, выбираете элемент нужный, и жмете на вкладку Computed, и там уже разберетесь что к чему:)