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 :(
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 :(
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