0

Boa noite, meu nome é Rui.

Estou desenvolvendo meu primeiro site e estou com duvida em relação a imagens usando hover responsivo.

Fiz um hover usando uma imagem preta e branco e colorida, mas só ficou responsivo em tela de PC, celular nao :(

o site é http://www.5kleague.com.br/times.html

1 Resposta 1

0

Depois de ter consertado o bootstrap faça o seguinte, sempre defina um tamanho para as coisas

em todos os seus coloque uma classe no exemplo vou colocar "time-link" observação, só coloque nas figures que irão ficar as imagens dos times exemplo:

<section id="times1">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-3">
                    <figure class="time-link">
                        <a  href="perfilTime.html">
                            <img class="cores" src="image/alligators_png.png">
                            <img class="preto" src="image/alligators_png2.png">
                        </a>    
                    </figure>
                </div>
                <div class="clearfix visible-xs"></div>
                <div class="col-xs-12 col-md-3">
                    <figure class="time-link">
                        <!--<a href="#">9-->
                            <img class="cores" src="image/biters_png.png">
                            <img class="preto" src="image/biters_png2.png">
                        <!--</a>--> 
                    </figure>
                </div>
                <div class="clearfix visible-xs"></div>
                <div class="col-xs-12 col-md-3">
                    <figure class="time-link">
                        <!--<a href="#">-->
                            <img class="cores" src="image/deserts_png.png">
                            <img class="preto" src="image/deserts_png2.png">
                        <!--</a>-->
                    </figure>
                </div>
                <div class="clearfix visible-xs"></div>
                <div class="col-xs-12 col-md-3">
                    <figure class="time-link">
                        <!--<a href="#">-->
                            <img class="cores" src="image/drakos_png.png">
                            <img class="preto" src="image/drakos_png2.png">
                        <!--</a>-->
                    </figure>
                </div>
            </div>
        </div>
    </section>

Depois de colocar time-link nas figures defina um tamanho no seu css, como o tamanho das imagens estão 170 x 150 vou definir assim, coloque margin: 0 auto; para ele centralizar

.time-link{
   width: 170px;
   height: 150px;
   margin: 0 auto;
}

se quiser diminua a margem do time2 e time3 (OPCIONAL)

#time2,#time3{
  margin-top: 5%;
}

Fazendo isso funcionará, qualquer coisa grita

6
  • Oi Anderson, obrigado pela resposta !!! Fiz tudo que você disse relacionado ao JQuery, mesmo assim não funcionou. Estudei mais um pouco sobre as grid do bootstrap e nada ... Coloquei col-xs-12 para mostrar apenas 1 time em mobile e col-md-3 para uma row com 4 times, correto ? Sera que meu css esta errado, pode me ajudar por favor? Commented 8/11/2017 às 2:59
  • Fez? O site ainda está sem a pasta js e sem o jquery Commented 8/11/2017 às 10:05
  • ah sim, é porque eu testei aqui em casa mesmo, mas vou hospedar a pasta no filezilla cmo o arquivo.. pronto ! rsrs Commented 8/11/2017 às 13:15
  • Ok irmãozin @ruiqueiroz Vou alterar a resposta, agora vai funcionar Commented 8/11/2017 às 14:13
  • Anderson obrigado !!! Consegui, deu tudo certo e estou muito feliz !!! esse site é importante pra mim, obrigado de verdade. estou impressionado com a boa vontade e ajudar!!! Commented 10/11/2017 às 1:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .