CSS Image Hover surprisingly not working? - html

Question

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.
#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;
}
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/ibanezLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/fenderLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/gibsonLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/prsLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/ernieballLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/espLogo.jpg" runat="server"/>
</div>
</section>

Answer 1

If you don't want to affect other elements and change the background color of div element around your images, then create new class like myHover and add existing CSS to it, like:
HTML:
<div class="border_section myHover">
<img class="guitarLogo" src="../Images/Guitar Brands/fenderLogo.jpg" runat="server" />
</div>
CSS:
.myHover:hover {
color: yellow;
background-color: blue;
}
JSFiddle example: https://jsfiddle.net/59drat5e/4/

Answer 2

The selector would be img.guitarLogo:hover
But setting a background-color for an image will only affect the visible part around the image (if there is ANY), and color would only affect text (and there isn't any), so you will problably see no effect, even if it works.

Answer 3

It looks like that you are targeting the wrong element. The background-color:blue will only be visible if the image is transparent, otherwise most of the time the image will just overlap any background color for it to be visible.
What you should be doing is targetting the container element as shown below.
.border_section:hover
{
color: yellow;
background-color: blue;
}
DEMO
If you have images with transparencies or still if you want to set the background-color of the img just for the sake of it, then maybe you should write the rule as below.
img.guitarLogo:hover
{
color: yellow;
background-color: blue;
}

Answer 4

Try this code in your css
.guitarLogo:hover {
background: blue;
}

Answer 5

you can also overlay background color to image
.overlay {
position:relative;
width:400px;
height:auto;
}
.overlay img {
width:100%;
vertical-align:top;
}
.overlay:after {
content:'';
position:absolute;
width:100%;
height:100%;
top:0; left:0;
background:red;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.overlay:hover:after {
opacity:1;
}
<div class="overlay">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
</div>

Answer 6

Your CSS:
.guitarLogo img:hover {
color: yellow;
background-color: blue;
}
Is incorrect, because the .guitarLogo already targets the <img> element - no need for img:hover.
Also, that isn't going to work, because there is no way you can set z-index to background only - it's possible only for elements.
The way to do what you want is to register :hover on parent container and in it by using pseudo element :before / :after as the foreground you can get the desired effect.