How to change background image on hover and text color CSS MVC 5

Question

Here is my div,

<div >
                    <div class="thumbnail text-center">
                        <a href="@Url.Action("Index", "Employees")">
                            <img src="~/AppFiles/Images/Tile.png" class="img-fluid img-thumbnail border border-success">
                            <div class="caption">
                                <p>@Resource.Employee</p>
                                <p>@ViewBag.EmpCount</p>
                            </div>
                        </a>
                    </div>
                </div>

when I hover on div I want to change the src of the img to '~/AppFiles/Images/HoverTile.png', and in class="caption" I want the color of text to change to white

Hopes for your suggestions

Answer 1

Add to your css file:

.thumbnail:hover {
 // Write everything you want to happen after hover


}

same for 'caption' class

 .caption:hover {
 color:white;
 }

If you wanna do it with javascript and change the src:

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" 
onmouseover="hover(this);" onmouseout="unhover(this);" />

function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}