Add a blur effect when hovering over images and give them proper titl…

…e attributes

index.html

@@ -66,21 +66,21 @@ <h2>Latest Projects</h2>
                 <div class="flex">
                     <div class="project">
                         <a href="https://github.com/mfrancis95/crispy-multiplayer-doom">
-                            <img alt="Doom Forks" src="https://s3.amazonaws.com/michaelfrancis.me/images/doom.png">
+                            <img alt="Doom Forks" src="https://s3.amazonaws.com/michaelfrancis.me/images/doom.png" title="Doom Forks">
                         </a>
                         <p>As a long-time fan of id Software's Doom, I've decided to give back to the wonderful community that has kept it going for 25+ years with contributions to several popular open-source Doom source ports, all while maintaining some forks of my own, such as Crispy Multiplayer Doom.</p>
                         <a class="button" href="https://github.com/mfrancis95/crispy-multiplayer-doom">Check it out</a>
                     </div>
                     <div class="project">
                         <a href="https://github.com/mfrancis95/game-night">
-                            <img alt="Game Night" src="https://s3.amazonaws.com/michaelfrancis.me/images/game-night.jpg">
+                            <img alt="Game Night" src="https://s3.amazonaws.com/michaelfrancis.me/images/game-night.jpg" title="Game Night">
                         </a>
                         <p>Developed for RIT's Computer Science House (CSH), Game Night is a fully searchable board and card game database, with games submitted and edited by the organisation's members. The service also exposes a RESTful API, which is already in use by an application built for the Slack platform.</p>
                         <a class="button" href="https://github.com/mfrancis95/game-night">Check it out</a>
                     </div>
                     <div class="project">
                         <a href="https://github.com/mfrancis95/redis-provisioner">
-                            <img alt="Redis Provisioner" src="https://s3.amazonaws.com/michaelfrancis.me/images/redis-provisioner.png">
+                            <img alt="Redis Provisioner" src="https://s3.amazonaws.com/michaelfrancis.me/images/redis-provisioner.png" title="Redis Provisioner">
                         </a>
                         <p>The Redis Provisioner is a tool that creates and maintains Redis servers through a RESTful API. Each instance gets bound to its own Docker container. This is currently being developed to accomodate CSH's existing provisionable database services.</p>
                         <a class="button" href="https://github.com/mfrancis95/redis-provisioner">Check it out</a>

style.css

@@ -166,12 +166,17 @@ a {
     margin-bottom: 0;
 }
 
-.project img {
+img {
     border-radius: 5px;
     height: auto;
+    transition: filter 0.2s;
     width: 80%;
 }
 
+img:hover {
+    filter: blur(2px);
+}
+
 .project p {
     margin-left: auto;
     margin-right: auto;