Good evening, my name is Rui.
I'm developing my first website and am having second thoughts about using hover responsive images.
I made a hover using a black and white and colored image, but only became responsive on PC screen, not cell phone: (
The site is link
After you have fixed the bootstrap, do the following, always set a size for things
In all your put a class in the example I will put "time-link" remark, just put in the figures that will be the images of the times example:
<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>
After putting time-link in the figures set a size in your css, as the size of the images are 170 x 150 I will define so, put margin: 0 auto; for it to centralize
.time-link{
width: 170px;
height: 150px;
margin: 0 auto;
}
If you want to shorten the margin of time2 and time3 (OPTIONAL)
#time2,#time3{
margin-top: 5%;
}
Doing this will work, anything screams