0
Next guys I need to make the side images of the agenciamento menu of this website keep showing them all without using the scroll. when I click on the images a text appears talking about each one realize that when they scroll the page the images scroll together like to leave them fixed and only scroll the part of the text.
It follows my code: the HTML:
<div id="agenciados" class="uk-modal">
<div class="uk-modal-dialog uk-modal-dialog-blank">
<button class="uk-modal-close uk-close" type="button"></button>
<div class="uk-grid uk-flex-middle" data-uk-grid-margin="">
<div class="uk-hidden-small uk-width-medium-2-5 uk-height-1-1 uk-row-first">
<div class="profile" id="mauricio">
<div class="uk-grid uk-height-1-1">
<div class="uk-width-medium-1-2 uk-row-first uk-height-1-1">
<img src="{!! asset('img/agenciados/mauricio-meirelles.png') !!}" alt="Maurício Meirelles">
</div>
<div class="uk-width-medium-1-2 uk-height-1-1">
<h2>Maurício<br>Meirelles</h2>
</div>
</div>
</div>
<div class="profile active" id="bruna-louise">
<div class="uk-grid uk-height-1-1">
<div class="uk-width-medium-1-2 uk-row-first uk-height-1-1">
<img src="{!! asset('img/agenciados/bruna-louise.png') !!}" alt="Bruna Louise">
</div>
<div class="uk-width-medium-1-2 uk-height-1-1">
<h2>Bruna<br>Louise</h2>
</div>
</div>
</div>
<div class="profile" id="rafael-cortez">
<div class="uk-grid uk-height-1-1">
<div class="uk-width-medium-1-2 uk-row-first uk-height-1-1">
<img src="{!! asset('img/agenciados/rafael-cortez.png') !!}" alt="Rafael Cortez">
</div>
<div class="uk-width-medium-1-2 uk-height-1-1">
<h2>Rafael<br>Cortez</h2>
</div>
</div>
</div>
<div class="profile active" id="fabio-rabin">
<div class="uk-grid uk-height-1-1">
<div class="uk-width-medium-1-2 uk-row-first uk-height-1-1">
<img src="{!! asset('img/agenciados/fabio-rabin.png') !!}" alt="Fábio Rabin">
</div>
<div class="uk-width-medium-1-2 uk-height-1-1">
<h2>Fábio<br>Rabin</h2>
</div>
</div>
</div>
</div>
<div class="uk-width-medium-3-5 description choose">
<h1>Veja o perfil de<br>nosso casting</h1>
<div class="uk-width-medium-5-6">
<p>Escolha uma das personalidades ao lado.</p>
</div>
</div>
<div class="uk-width-medium-3-5 description mauricio" style="display: none">
<h1>Contrate o Maurício</h1>
<div class="uk-width-medium-5-6">
<p>Um dos grandes nomes do humor nacional, com mente criativa, que se reinventa a todo tempo com novos projetos, textos e quadros. Foi repórter do CQC, de 2011 á 2015 e apresentador do CQC 3.0 (Ao vivo).</p>
<p>Em 2010, lançou o livro ''E se o Stand-Up Virasse Livro - O primeiro show impresso do Brasil'' pela Ediouro.</p>
<p>Também faz um pocket show de humor especial para o mercado corporativo, que já foi apresentado para mais de 100 empresas.</p>
<p>Atualmente está em cartaz no Teatro Frei Caneca, em São Paulo e em turnê pelo Brasil com o stand-up ''Perdendo amigos'', onde ele também faz o quadro que criou, 'Facebullying'/'Webbullying'.</p>
<p><a href="https://www.youtube.com/watch?v=l9W7ar85fGs" target="_blank">https://www.youtube.com/watch?v=l9W7ar85fGs</a></p>
<p>Atualmente também é considerado um influenciador digital, com + de 1M de inscritos no youtube e + de 1,2M na Fan Page Facebook.</p>
<a class="site" href="http://mauriciomeirelles.com" target="_blank">Visitar site</a>
<ul class="uk-list social-info">
<li><img src="{!! asset('img/icon-youtube-color.png') !!}" alt="Youtube"><div class="g-ytsubscribe" data-channel="mauriciomeirelles" data-layout="full" data-count="default"></div></li>
<li><img src="{!! asset('img/icon-facebook-color.png') !!}" alt="Facebook"><div class="fb-like" data-href="https://www.facebook.com/Mauricio.Meirelles.Oficial/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div></li>
<li><img src="{!! asset('img/icon-instagram-color.png') !!}" alt="Instagram">
<style>
.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-v-24 { width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-v-24 { background-image: url(//badges.instagram.com/static/images/[email protected]); background-size: 160px 178px; } }
</style>
<a target="_blank" href="https://www.instagram.com/maumeirelles/?ref=badge" class="ig-b- ig-b-v-24"><img src="//badges.instagram.com/static/images/ig-badge-view-24.png" alt="Instagram" /></a>
</li>
</ul>
</div>
</div>
<div class="uk-width-medium-3-5 description bruna-louise" style="display: none">
<h1>Contrate a Bruna Louise</h1>
<div class="uk-width-medium-5-6">
<p>Formada em artes cênicas no Rio de Janeiro, Bruna Louise iniciou sua carreira no teatro fazendo
drama, embora sempre quisesse seguir com a comédia. Começou a fazer stand up em 2010 em um grupo
em Curitiba onde ela também produzia, depois que um ex-chefe disse que ela não tinha vocação
para isso. A partir de então, participou de importantes shows em São Paulo, como o Comédia ao
Vivo e Comédia em Pé no Rio de Janeiro. Ano passado apresentou "Deixa eu te Contar", peça em que
atua ao lado de Kefera Buchmann. Além disso, em 2016 irá estrear em dois programas no canal
MultiShow e prepara o lançamento de seu livro. Atualmente está em turnê pelo Brasil com seu
stand up "Desbocada".</p>
<p>Também é considerada uma influenciadora digital com + de 700 mil inscritos no Youtube e + 880
mil seguidores no Instagram.</p>
<a class="site" href="http://brunalouise.com.br/" target="_blank">Visitar site</a>
<ul class="uk-list social-info">
<li>
<img src="{!! asset('img/icon-youtube-color.png') !!}" alt="Youtube">
<div class="g-ytsubscribe" data-channel="brunalouisehumor" data-layout="full" data-count="default"></div>
</li>
<li>
<img src="{!! asset('img/icon-facebook-color.png') !!}" alt="Facebook">
<div class="fb-like" data-href="https://www.facebook.com/abrunalouise/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</li>
<li>
<img src="{!! asset('img/icon-instagram-color.png') !!}" alt="Facebook">
<a target="_blank" href="https://www.instagram.com/abrunalouise/?ref=badge" class="ig-b- ig-b-v-24"><img src="//badges.instagram.com/static/images/ig-badge-view-24.png" alt="Instagram" /></a>
</li>
</ul>
</div>
</div>
<div class="uk-width-medium-3-5 description rafael-cortez" style="display: none">
<h1>Contrate o Rafael Cortez</h1>
<div class="uk-width-medium-5-6">
<p>
Rafael atuou nos seguintes espetáculos teatrais: “Made in Brazil“, com direção de Pedro Granato (2002); “Francisco e Clara, o Musical”, com direção de Rubens Rivelino (2003); “A Casa de Bernarda Alba“, com direção de Melissa Vettore, (2003); “Contando Clássicos - Espetáculo de Improvisação“, com direção de Maximiliana Reis (2005); “Lendas e Loas“ – com Alejandra Pinel (2006); “Os Saltimbancos“ – direção da Cia. Quatro na Trilha (2004/2005/2006/2007) e “O Mágico de Óz“ – direção de Linaldo Telles – (2006/2007).
<br>
Na TV Em seus primeiros trabalhos na TV, entre os anos de 1998 e 2003, participou de produções independentes veiculadas nas redes CNT, Gazeta e Rede Mulher de Televisão. Está no 12º episódio da série especial de Chico Buarque, produção da R.W.R e Rede Bandeirantes, exibida em 2006 e comercializada para todo o Brasil.
<br>
Cortez fez parte também da primeira formação do programa CQC – Custe o que Custar, da Band. Ficou no programa entre 2008 e 2013 indo para a Rede Record de Televisão. Lá, apresentou o modelo nacional do programa Got Talent, atuou no especial “A Nova Família Trapo”, em 2014, apresentou o programa Me Leva Contigo. Em janeiro de 2015 voltou ao CQC, seguindo até o final do programa em dezembro de 2015.
<br>
Também em 2015, realizou dois trabalhos especiais com o canal a cabo Comedy Central: foi apresentador da nova temporada do “República do Stand-Up”, e protagonizou o reality-show que idealizou e concebeu junto ao canal: “Dirige Rafa”. Agora, em 2016, Cortez segue com matérias, quadros e participações irreverentes na Rede Globo de Televisão. Ele pode ser visto no Vídeo Show, entre segunda e sexta, toda semana.
<br>
Ainda em 2016, Rafael Cortez trabalha na temporada e turnê de seu novo solo de humor, ““O problema não é você, sou eu – dicas de um amante fracassado para ter sorte no amor””, além de gravar seu primeiro DVD com a íntegra de “De Tudo um Pouco”, seu solo anterior.
<br>
Também é um grande influenciador digital, contando com mais de 696 mil curtidas em sua página no Facebook e mais de 298 mil seguidores no Instagram.
</p>
<a class="site" href="http://rafaelcortez.com/" target="_blank">Visitar site</a>
<ul class="uk-list social-info">
<li>
<img src="{!! asset('img/icon-youtube-color.png') !!}" alt="Youtube">
<div class="g-ytsubscribe" data-channel="lovetreta" data-layout="full" data-count="default"></div>
</li>
<li>
<img src="{!! asset('img/icon-facebook-color.png') !!}" alt="Facebook">
<div class="fb-like" data-href="https://www.facebook.com/RafaCortezOficial/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</li>
<li>
<img src="{!! asset('img/icon-instagram-color.png') !!}" alt="Facebook">
<a target="_blank" href="https://www.instagram.com/rafaelcortez/?ref=badge" class="ig-b- ig-b-v-24"><img src="//badges.instagram.com/static/images/ig-badge-view-24.png" alt="Instagram" /></a>
</li>
</ul>
</div>
</div>
<div class="uk-width-medium-3-5 description fabio-rabin" style="display: none">
<h1>Contrate o Fábio Rabin</h1>
<div class="uk-width-medium-5-6">
<p>2007 – Foi um dos fundadores do grupo “Comédia Ao Vivo” que permanece à 7 anos em cartaz no
Hotel Renaissance , considerado um dos melhores e mais tradicionais shows de comédia do
país.
<br>
2009 – Entrou para a MTV, onde fez parte do programa “Furfles”.
<br>
2010/ 2011 - Participou do “Comédia MTV”, que foi vencedor do prêmio APCA de melhor humorístico
daquele ano. Participou ativamente de dois VMBs.
<br>
2012 – Atuou no telefilme “Mandrake” da HBO.
<br>
2013 - Gravou seu primeiro DVD de Stand up, “Sem Noção” e participou dos programas “Fritada” e
“Wébico”” pelo canal
Multishow.
<br>
2014 - Continuou na segunda temporada do “Fritada” no
Multishow. Protagonizou o espetáculo:
ATREVA-SE dirigido por Jô Soares, e continuou
em cartaz em todo o Brasil em 2015.
<br>
2015 – Pela primeira vez Rabin estreou e estrelou seu próprio programa na TV, o “Longa Metragem”
que teve sua 1a temporada exibida em Março deste ano pela TBS.
<br>
2016 - Estreia em Fevereiro nos cinemas no elenco do filme “ Um Suburbano Sortudo”. E está de
volta também na TV no elenco fixo de “Pânico na Band”, e diariamente no “Pânico na Rádio” Jovem
Pan. Além disto, Fabio Rabin está viajando por todo Brasil com seu show solo de Stand Up Comedy
“Queimando o Filme”.
</p>
<a class="site" href="http://fabiorabin.com.br/" target="_blank">Visitar site</a>
<ul class="uk-list social-info">
<li>
<img src="{!! asset('img/icon-youtube-color.png') !!}" alt="Youtube">
<div class="g-ytsubscribe" data-channel="fabiorabinstandup" data-layout="full" data-count="default"></div>
</li>
<li>
<img src="{!! asset('img/icon-facebook-color.png') !!}" alt="Facebook">
<div class="fb-like" data-href="https://www.facebook.com/fabiorabinstandup/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</li>
<li>
<img src="{!! asset('img/icon-instagram-color.png') !!}" alt="Facebook">
<a target="_blank" href="https://www.instagram.com/fabiorabin/?ref=badge" class="ig-b- ig-b-v-24"><img src="//badges.instagram.com/static/images/ig-badge-view-24.png" alt="Instagram" /></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
and the CSS:
#agenciados {
.description a:hover {
color: @primary-color;
}
.profile {
height: 33.33%;
background-color: @primary-color;
position: relative;
cursor: pointer;
transition: background-color 200ms;
&:hover {
background-color: darken(@primary-color, 3%);
}
&.active {
background-image: url('img/pattern.png');
}
img {
position: absolute;
bottom: 0;
max-height: 100%;
}
h2 {
color: #fff;
font-size: 38px;
line-height: 1;
text-transform: uppercase;
position: relative;
top: 50%;
}
}
}
NOTE: I am using Bootstrap V3