CSS Image Hover surprisingly not working?
<p>I'm trying to create a hover effect that will change the color of the image to blue, as the mouse hovers it. I've already created a class for the images and styled it in my css but its still not working. I've also tried changing z-indexes but to no avail. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    @import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700);     /*--- Header --*/
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*---    Navigation --*/

    *
    {
 margin: 0;
 border: 0;
 padding: 0;
    }

     body
    {
 background-image: url('../Images/background.png');
 background-repeat: repeat-x;
 
    }

    .clearfix
    {
 clear:both;
    }

    #wrapper
    {
 margin: 0 auto;
 max-width: 1120px;
 overflow: auto;  
 border: 1px solid black;
    }

    #main_header
    {
 width: 100%;
 font-family: 'Black Ops One', sans-serif;
 background-color: black;
 border: 1px solid black;
 color: white;
    }

    #main_header h1
    {
 float: left;
 font-size: 380%;
 margin: -10% 0 0 2%;
 
    }

    #callout
    {
 margin: 50px 20px 0 0;
    }

    #callout h2{
 text-align: right;
 color: white;
    }

    #callout p{
 text-align: right;
 padding: 0%;
 color: grey;
 font-size: 20px;
 margin-bottom: 3px;
    }

    #nav_menu
    {
 
 width: 100%;
 height: 10%;
 background-color: white;
    }

    #nav_menu li
    {
 display: inline-block;
 margin: 20px 20px 20px 63px;
 font-family: 'Open Sans', sans-serif;
 font-size: 20px;
 font-weight: bold;
    }

    #nav_menu li a
    {
 text-decoration: none;
 color: black;
    }

    #nav_menu li a:hover
    {
 color: grey;
    }

    #content_area 
    {
    width: 100%;
    margin: 10px;
    }

    .sub-menu
    { 
 position: absolute;
 background-color: white;
 list-style-type: none;
 width: 5px;
 display: none;
 z-index: 60;
 border-radius: 15px;
    }

    #nav_menu .sub-menu li a
    {
 color: black;
    }

    #nav_menu li:hover .sub-menu
    {
 display: block;
    }

    #nav_menu li .sub-menu
    {
 width: 16.5%;
    }

    #nav_menu li .sub-menu li
    {
 display: block;
 margin-left: 20px;
    }

    .sub-menu li:hover
    {
 color: green;
 background-color: yellow;
    }

    /*--- Start Image Slider --*/
    .slider{
 max-width: 1100px;
 box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0.07);
   
    
    }

    .slider1 img{
 width: 100%;
 margin: 0 auto;
    }

    .slider .bx-wrapper .bx-controls-direction a{
 outline: 0 none;
 position: absolute;
 text-indent: -9999px;
 top: 40%;
 height: 71px;
 width: 40px;
 transition: all 0.7s;
    }

    .slider .bx-wrapper:hover .bx-controls-direction a{
 
    }

    .slider .bx-wrapper .bx-prev{
 background: url("../Images/arrow_left.png") no-repeat 7px 9px;
 left: 0px;
    }

    .slider .bx-wrapper .bx-prev:hover{
 background:  url("../Images/arrow_left.png") no-repeat 8px 15px;
    }

    .slider .bx-wrapper .bx-next{
 background:  url("../Images/arrow_right.png") no-repeat 10px 12px;
 right: 0px;
    }

    .slider .bx-wrapper .bx-next:hover{
 background:  url("../Images/arrow_right.png") no-repeat 10px 17px;
    }

    /*--- End Image Slider --*/

    .one-third img{
 text-align: center;
 max-width: 100%;
 height: auto;
 opacity: 0.9;
    }

    .border_section p{
 font-family: 'Lato', sans-serif;
 padding: 2%;
 color: white;
 text-align: justify;
    }

    .border_section h3
    {
 font-family: 'Open Sans', sans-serif;
 text-align: center;
 color: white;
 text-transform: uppercase;
 letter-spacing: 1%;
    }

    .border_section
    {
 border: 1px solid black;
 background-color: black;
    }

    .one-third {
    width: 27.35%;
    float: left;
    margin: 2% 0 3% 4%;
    text-align: center;
    background-color: white;
    }

    .guitarLogo img:hover
    {
    color: yellow;
    background-color: blue;

    }

    footer{
 font-family: 'Open Sans', sans-serif;
 font-weight: bold;
 text-align: center;
 width: 100%;
 height: 6%;
 background-color: black;
 overflow: auto;
    }

    footer p
    {
 margin-top: 1%;
 color: white;
    }



 </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="border_section"&gt;
            &lt;img class="guitarLogo" src="../Images/Guitar Brands/ibanezLogo.jpg" runat="server"/&gt;
  &lt;/div&gt;
     &lt;/section&gt;
   
        &lt;section class="one-third"&gt;
  &lt;div class="border_section"&gt;
   &lt;img class="guitarLogo" src="../Images/Guitar Brands/fenderLogo.jpg" runat="server"/&gt;
  &lt;/div&gt;
     &lt;/section&gt;

        &lt;section class="one-third"&gt;
  &lt;div class="border_section"&gt;
   &lt;img class="guitarLogo" src="../Images/Guitar Brands/gibsonLogo.jpg" runat="server"/&gt;
  &lt;/div&gt;
     &lt;/section&gt;

        &lt;section class="one-third"&gt;
  &lt;div class="border_section"&gt;
   &lt;img class="guitarLogo" src="../Images/Guitar Brands/prsLogo.jpg" runat="server"/&gt;
  &lt;/div&gt;
     &lt;/section&gt;

        &lt;section class="one-third"&gt;
  &lt;div class="border_section"&gt;
   &lt;img class="guitarLogo" src="../Images/Guitar Brands/ernieballLogo.jpg" runat="server"/&gt;
  &lt;/div&gt;
     &lt;/section&gt;

        &lt;section class="one-third"&gt;
  &lt;div class="border_section"&gt;
   &lt;img class="guitarLogo" src="../Images/Guitar Brands/espLogo.jpg"    runat="server"/&gt;
  &lt;/div&gt;
    &lt;/section&gt;</code></pre>
</div>
</div>
</p>