How to change the image when mouse over

Question

I am making a service area of my site(wordpress), and would like to add only images in it and when the user hovers over these images that image change to another so with the name of the service that was that first...

I would like to know what it takes to do this... whether it is done by HTML, or whether it will be by css or javascript...

Thanks in advance.

So far so good is the code.

<div class="servicos">
		<div class="container">
			<div class="row">

				<div class="col-md-3 col-lg-3">
					<img class = "img-responsive " src = " <?php bloginfo('template_directory' ); ?> /assets/images/logobeta.png">
				</div>
					<div class="col-md-3 col-lg-3">
					<img class = "img-responsive " src = " <?php bloginfo('template_directory' ); ?> /assets/images/logobeta.png">
				</div>
					<div class="col-md-3 col-lg-3">
					<img class = "img-responsive " src = " <?php bloginfo('template_directory' ); ?> /assets/images/logobeta.png">
				</div>
					<div class="col-md-3 col-lg-3">
					<img class = "img-responsive " src = " <?php bloginfo('template_directory' ); ?> /assets/images/logobeta.png">
				</div>



			</div>
		</div>
	</div>

Answer 1

To change the source from an image to a new source is required to use Javascript:

var x = document.querySelectorAll('.servicos .col-md-3');
var novaImg = 'https://lorempixel.com/400/100/sports/5';

for (var i = 0; i < x.length; i++) {
    novoX = x[i];
    novoX.addEventListener('mouseover', function(event){
        this.querySelector('img').src = novaImg;
    });
}

<div class="servicos">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <img src="https://lorempixel.com/400/100/sports/1"/>
            </div>

            <div class="col-md-3">
                <img src="https://lorempixel.com/400/100/sports/2"/>
            </div>

            <div class="col-md-3">
                <img src="https://lorempixel.com/400/100/sports/3"/>
            </div>
        </div>
    </div>
</div>

However if you want to show another image just as the mouse is doing Hover in an image, you can do something like in the example below with CSS only:

.col-md-3 {
    position: relative;
}
.col-md-3 .seg {
    visibility: hidden;
    opacity: 0;
    position:absolute;
    top:0;
    left:0;
}
.col-md-3:hover .seg {
    visibility: visible;
    opacity: 1;
}

<div class="col-md-3">
    <img class="pri" src="https://lorempixel.com/400/100/sports/1"/>
    <img class="seg" src="https://lorempixel.com/400/100/sports/5"/>
</div>

Or using the image as background:

.col-md-3 {
    width: 400px;
    height:100px;
    background-image: url(https://lorempixel.com/400/100/sports/1);
    background-repeat: no-repeat;
}
.col-md-3:hover {
    background-image: url(https://lorempixel.com/400/100/sports/5);
}

<div class="col-md-3"></div>