Improved gallery adaptive design, optimized and improved image details page

MyWebsite/Views/Gallery/Details.cshtml

@@ -1,6 +1,7 @@
 
 @{
     ViewData["Title"] = (ViewData["CurrentImage"] as Image).Title;
+    Image image = ViewData["CurrentImage"] as Image;
 }
 
 <header>
@@ -8,12 +9,17 @@
 </header>
 
 <article class="image-overview-block">
-    <img src="~/images/Gallery/@((ViewData["CurrentImage"] as Image).FileName)" onclick="ToggleImageSize();" id="image" />
+    <img src="~/images/Gallery/@image.FileName" onclick="ToggleImageSize();" id="image" />
 
     <div>
-        <h1>@((ViewData["CurrentImage"] as Image).Title)</h1>
+        <h1>@image.Title</h1>
-        <span>Creation date: @((ViewData["CurrentImage"] as Image).CreationDate.ToShortDateString())</span>
+        <span>Creation date: @image.CreationDate.ToShortDateString()</span>
-        <p>@((ViewData["CurrentImage"] as Image).Description)</p>
+        <p>
+            @foreach(string line in image.Description.Split("<br />"))
+            {
+                @line<br />
+            }
+        </p>
     </div>
 </article>
 

MyWebsite/wwwroot/css/Gallery.css

@@ -1,19 +1,20 @@
 .gallery img {
     object-fit: cover;
-    max-height: 200px;
+    max-height: 300px;
     max-width: 100%;
     margin: 2px;
     transition: .25s;
 }
 .gallery img:hover {
     filter: brightness(125%);
-    transform: scale(1.25);
+    transform: scale(1.1);
 }
 
 .image-overview-block img {
     max-height: 50vh;
     max-width: 100%;
     float: left;
+    cursor: zoom-in;
 }
 .image-overview-block div {
     display: inline-block;
@@ -22,3 +23,13 @@
 .image-overview-block h1 {
     margin-bottom: 0px;
 }
+
+@media only screen and (max-width: 600px) {
+    .gallery img {
+        max-height: none;
+    }
+    .gallery img:hover {
+        filter: brightness(125%);
+        transform: none;
+    }
+}

MyWebsite/wwwroot/js/site.js

@@ -16,10 +16,12 @@ function ToggleImageSize()
     {
         image.style.maxHeight = "50vh";
         image.style.maxWidth = "100%";
+        image.style.cursor = "zoom-in";
     }
     else
     {
         image.style.maxHeight = "none";
         image.style.maxWidth = "none";
+        image.style.cursor = "zoom-out";
     }
 }