Image with responsive HOVER

Question

Good night, my name is Rui.

I’m developing my first website and I’m having doubts regarding images using Responsive Hover.

I made a Hover using a black and white and colorful image, but only got responsive on PC screen, cell phone not :(

the site is http://www.5kleague.com.br/times.html

Answer 1

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" note, just put in the figures that will be the images of the teams 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 set so, put margin: 0 auto; for it to center

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

if you want to reduce the time2 and time3 margin (OPTIONAL)

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

Doing this will work, anything screams