BrunoEarth BrunoEarth - 1 month ago 12
CSS Question

CSS Image Hover surprisingly not working?

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

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/

Comments