How to add a link to image - html

Question

I am trying to create a link that is displayed on an image which should take me to a different view. I can only add a link below the image which doesn’t look very presentable. I am using basic html. Please can someone assist me?
<div class="card">
<img src="#Url.Content("~/Content/B01.jpg")" alt="Avatar" style="width:100%">
<div class="container">
<br>
<div>
#Html.ActionLink("Back to List", "Index")
</div>

Answer 1

A link is just an <a> element wrapping the clickable part, which is probably most often text but can just as easily be an <img> element. You can create one manually and use the Url.Action helper to define the URL:
<a href="#Url.Action("Index")">
<img src="#Url.Content("~/Content/B01.jpg")" alt="Avatar" style="width:100%">
</a>

Answer 2

This code worked for me. You had to create a link to the next view and add the image afterwards. You can also use style tags to manipulate the links to your liking.
<li>
<a href="#Url.Action("Display name", "Controller")" title="your title" class="links">
<br />
<img alt="image alt" src="#Url.Content("~/Content/B01.jpg")"
style="width:500px;height:250px;border:0;"><br /><br /> <font size="4">Display a name</font>
</a>
</li>
You can also include a style
</ul>
<style type="text/css">
ul.links {
list-style-type: none;
}
ul.links li {
display: inline-block;
padding-left: 10px;
margin-left: 10px;
padding-bottom: 10px;
}
ul.links li:first-child {
border-left: 0;
padding-left: 10px;
margin-left: 10px;
}
</style>
<br />
<ul class="links"></ul>
<style>
ul.links {
list-style-type: none;
}
ul.links li {
border-left: 0;
padding-right: 30px;
margin-left: 0px;
}
</style>