DEVHIDE
Login Or Sign up

Why are my imgs not changing in opacity when hovered over?

55 Views Asked by At

I am having a problem with making my images go from opacity: .04; to opacity: 1; when hovered over. I was able to achieve a hover affect with my a tag. But with my images, I cant. My css is rather long, but I incorporated everything because I feel the problem lies when the content html and css for the content, and the css and html for the banner, nav and footer come together, that's where the problem is. But I am unsure of what is causing this problem. The effect I want is simple. Can someone help me understand where I messed up?

my html: 

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Gender Identity 3</title>



      <link rel="stylesheet" href="css/style-resources.css">


</head>

<body>
  <div class="container">
<header> 
<a href="index.html"> <img class="banner"  src="images/banner-light2.png"> </a>

</header>

<div id="wrap"> 

 <div id="tabwrap"> 
  <ul id="tabs">
   <li >
     <a href="index-terms.html" class="cyan">Terms</a>
   </li>

    <li>
     <a href="index-resources.html" class="green">Resources</a>
    </li> 

   <li>
     <a href="index-media.html" class="lav">Culture</a>
    </li> 

    <li>
      <a href="index-share.html" class="teal">Share</a>
    </li>

  </ul> 

  <div id="content"> 
    <div id="terms" class="animated"> <p>Bacon ipsum dolor amet ribeye short loin leberkas andouille jerky meatloaf pork spare ribs corned beef. Andouille ham hock ground round, shankle pastrami rump hamburger filet mignon. </p></div>
    <div id="resources" class="animated"><p>Access information providing links and other sources for those looking to reach out to others or simply learn more about gender Identitiy and orientation. </p></div>
    <div id="culture" class="animated"><p>Tuna, sculpin squeaker rice eel, lamprey triggerfish mooneye African glass catfish, loach wolf-eel yellowhead jawfish grass carp sea dragon neon tetra. Fingerfish forehead brooder sarcastic fringehead sixgill ray, scaly dragonfish bluntnose minnow.</p></div>
    <div id="share"  class="animated"> <p>Sausage ground round sirloin ham hock t-bone tongue strip steak meatloaf landjaeger shankle andouille. Turducken doner brisket, shank salami shoulder kevin filet mignon ball tip chicken.</p>
    </div> <!-- End of Div-->
   </div> <!-- End of Div-->
  </div><!-- End of Div-->

 <!-- Testing Share Content -->

<div class="container2">

<div class="intro">
  <div class="pic1">
     <img class="intro-img" src="https://s23.postimg.org/94clk2prf/resources_gender_spectrum2.png">
    </div> <!-- End pic1 -->
<div class="wrapper">
<article class="blue" id="colors-content">
  <div>
    <a href=""> <h1> Gender
      Spectrum.com </h1> </a>
    <p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash  hth as jasd ashd as ahsdjas r ajsgda  uaju ashd ujawh uu ajshdhuiae</p>
  </div>
</article><!-- End of article -->
</div><!-- End wrapper -->
  </div> <!-- End intro -->
<div class="intro">
  <div class="pic1">
     <img class="intro-img" src="https://s28.postimg.org/ku57tve0t/trevor.png">
    </div> <!-- End pic1 -->
<div class="wrapper">
<article class="red" id="colors-content">
  <div>
    <a href=""> <h1> Trevor Project </h1> </a>
    <p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash  hth as jasd ashd as ahsdjas r ajsgda  uaju ashd ujawh uu ajshdhuiae</p>
  </div>
</article><!-- End of article -->
</div><!-- End wrapper -->
  </div> <!-- End intro -->
</div> <!-- End intro -->
<div class="intro">
  <div class="pic1">
     <img class="intro-img" src="https://s23.postimg.org/enh4axo8r/image.png">
    </div> <!-- End pic1 -->
<div class="wrapper">
<article class="color3" id="colors-content">
  <div>
    <a href=""> <h1> AAUP.COM </h1> </a>
    <p> Understanding the rights and laws protecting individuals in the lgbt+ community</p>
  </div>
</article><!-- End of article -->
</div><!-- End wrapper -->
  </div> <!-- End intro -->

</div>


  <!-- Testing Share Content -->

  <!-- Footer -->
<footer class="info">
  <a href="index.html"> Home</a> | 
  <a href="index-terms.html"> Terms </a> | <a href="index-media.html">Media</a> | <a href="index-share.html" > Share</a>

  <p class="last-home"> | 2016 | Web Design</p>
</footer>


  </div> <!-- End of Div-->

</div> <!-- End of Div-->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script src="js/index-terms.js"></script>

</body>
</html>

my css: 

@font-face { font-family: "aqua"; 
  src: url('aqua.ttf'); } 
@font-face { font-family: "axis"; 
  src: url('Axis Extrabold.otf'); } 
@font-face { font-family: "atami"; 
  src: url('Atami-Regular.otf'); } 

.container {
  width: 100%;
  margin: 0 auto;
}

.banner{
  display: block;
margin: 0 auto;
  width: 100%;
  min-width: 400px;
  /*margin-bottom: 40px;*/
}

#content {
  position: absolute;
  z-index: 1;
  width: 100%;
}

.gender {
  padding-top: 20px;
  padding-bottom: 20px;
 /* background-color: black; */
  margin-bottom: 20px;
}
.gender h3{
text-align: center;
 color: rgb(0,0,0); /* white*/
  animation: rgb infinite alternate;
  animation-duration: 15s;
  font-size: 2em;
}


h3{
font-family: "axis", sans-serif;
}


h1{
font-family: 'Poppins', sans-serif;
font-size: 2.5rem;
}

.content-info {
  margin-top: 20px;
  text-align: center;
  display: block;
}

* { -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;  
  margin: 0; 
  padding: 0; }

#wrap { width: 100%; margin: 0 auto; min-width: 300px; max-width: 2000px; 
}

#tabwrap {
    /*background: #fff;*/
    overflow: hidden;
    width: 100%;
  max-height:  10rem;
    /*min-height: 300px;*/
    margin: 0 auto;
  background-color: black /*rgb(255,204,254)*/;
    /*box-shadow: 0 0 20px #ddd;*/
    /*border: 1px solid #ddd;*/
}
#tabs { overflow: hidden;  }
#tabs li { list-style: none;
           font-family: "axis", sans-serif; }

#tabs li a {
    float: left;
    display: block;
    padding: 10px;
    color: white;
    width: 25%;
    text-decoration: none;
    text-align: center;

    border-left: 1px solid #888;
    font-size: 15px;
  font-family: 'Montserrat', sans-serif;
}

#tabs li a:hover { background: #666; }
#tabs li:first-child a { border-left: 0; }
#tabs li:last-child a { border-right: 0; }

#tabs li.current a {
    background: #fff;
    color: #666;

}

#tabs li.current a.cyan{
    background: rgb(239,91,161); /*pink*/
    color: white;
}

#tabs li.current a.green{
background-color: #4AB0E4; /*blue*/
    color: white;
}

#tabs li.current a.lav{
 background-color: #9D248E;
    color: white;
}


#tabs li.current a.teal{
 background-color: #5F166B;
    color: white;
}



#content > div {
    clear: both;
    padding: 20px;
    line-height: 19px;
    color: white;
    display: none;
font-family: "aqua", sans-serif;
  text-align: center;

}
.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 2s;
}

#content .current { display: block }
#content p { /*margin: 0 0 20px 0;*/
  z-index: 1;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

#terms {
  background-color: rgb(239,91,161); /*pink*/
}

#resources {
  background-color: #4AB0E4; /*blue*/
}

#culture{
    background-color: #9D248E;
}

#share {
    background-color: #5F166B;
}

/* Banner and Nav info */


footer.info { text-align: center; color: #888; margin: 30px 0; }
footer.info p { color: black; }

.last-home {
padding-top: 10px;
}

footer a {
color: black;
}

/* footer info */

.container2 {
  margin: 0px;
  padding: 0px;
}

.intro {
width: 100%;
position: relative;
overflow: hidden;
  margin: 0;
  padding-top: 0;
}

.pic1 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.intro-img {
      display: block;
    margin: 0 auto;
    min-width: 100%;
  opacity: 0.4;
}

.intro-img:hover {
    opacity: 1;
}

.wrapper {
  height: 200px;
    min-height: 200px;
    position: relative;
  padding-bottom: 0;
}

.blue {
   background: #22428e;
    color: #fff;
}

.red{
     background: #de0e00;
    color: #fff;
}

.color3 {
  background: #f7c800;
    color: #fff;
}

#colors-content {
    height: 200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 330px;
    padding: 0 25px;
    margin-left: 3em;
}

h1 {
      text-transform: uppercase;
    font: 700 32px/35px 'Gotham SSm A','Gotham SSm B',Arial,Helvetica,sans-serif;
    margin: 0 0 34px;
  padding-top: 17px;
}

p {
  margin-top: -10px;
font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  color: black;
}


@media screen and (max-width: 454px) {

  .wrapper {
    min-height: 100px;
    position: relative;
}


#colors-content {
  height: 200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 0 25px;
margin-left: -4px;
}

  .pic1 {
    display: none;
}

}
html css hover opacity
Original Q&A
1

There are 1 best solutions below

1
On BEST ANSWER

Since you technically cannot hover the image (because of the way the html is structured),
you should change .intro-img:hover to .intro:hover img.intro-img

@font-face { font-family: "aqua"; 
  src: url('aqua.ttf'); } 
@font-face { font-family: "axis"; 
  src: url('Axis Extrabold.otf'); } 
@font-face { font-family: "atami"; 
  src: url('Atami-Regular.otf'); } 

.container {
  width: 100%;
  margin: 0 auto;
}

.banner{
  display: block;
margin: 0 auto;
  width: 100%;
  min-width: 400px;
  /*margin-bottom: 40px;*/
}

#content {
  position: absolute;
  z-index: 1;
  width: 100%;
}

.gender {
  padding-top: 20px;
  padding-bottom: 20px;
 /* background-color: black; */
  margin-bottom: 20px;
}
.gender h3{
text-align: center;
 color: rgb(0,0,0); /* white*/
  animation: rgb infinite alternate;
  animation-duration: 15s;
  font-size: 2em;
}


h3{
font-family: "axis", sans-serif;
}


h1{
font-family: 'Poppins', sans-serif;
font-size: 2.5rem;
}

.content-info {
  margin-top: 20px;
  text-align: center;
  display: block;
}

* { -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;  
  margin: 0; 
  padding: 0; }

#wrap { width: 100%; margin: 0 auto; min-width: 300px; max-width: 2000px; 
}

#tabwrap {
    /*background: #fff;*/
    overflow: hidden;
    width: 100%;
  max-height:  10rem;
    /*min-height: 300px;*/
    margin: 0 auto;
  background-color: black /*rgb(255,204,254)*/;
    /*box-shadow: 0 0 20px #ddd;*/
    /*border: 1px solid #ddd;*/
}
#tabs { overflow: hidden;  }
#tabs li { list-style: none;
           font-family: "axis", sans-serif; }

#tabs li a {
    float: left;
    display: block;
    padding: 10px;
    color: white;
    width: 25%;
    text-decoration: none;
    text-align: center;

    border-left: 1px solid #888;
    font-size: 15px;
  font-family: 'Montserrat', sans-serif;
}

#tabs li a:hover { background: #666; }
#tabs li:first-child a { border-left: 0; }
#tabs li:last-child a { border-right: 0; }

#tabs li.current a {
    background: #fff;
    color: #666;

}

#tabs li.current a.cyan{
    background: rgb(239,91,161); /*pink*/
    color: white;
}

#tabs li.current a.green{
background-color: #4AB0E4; /*blue*/
    color: white;
}

#tabs li.current a.lav{
 background-color: #9D248E;
    color: white;
}


#tabs li.current a.teal{
 background-color: #5F166B;
    color: white;
}



#content > div {
    clear: both;
    padding: 20px;
    line-height: 19px;
    color: white;
    display: none;
font-family: "aqua", sans-serif;
  text-align: center;

}
.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 2s;
}

#content .current { display: block }
#content p { /*margin: 0 0 20px 0;*/
  z-index: 1;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

#terms {
  background-color: rgb(239,91,161); /*pink*/
}

#resources {
  background-color: #4AB0E4; /*blue*/
}

#culture{
    background-color: #9D248E;
}

#share {
    background-color: #5F166B;
}

/* Banner and Nav info */


footer.info { text-align: center; color: #888; margin: 30px 0; }
footer.info p { color: black; }

.last-home {
padding-top: 10px;
}

footer a {
color: black;
}

/* footer info */

.container2 {
  margin: 0px;
  padding: 0px;
}

.intro {
width: 100%;
position: relative;
overflow: hidden;
  margin: 0;
  padding-top: 0;
}

.pic1 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.intro-img {
      display: block;
    margin: 0 auto;
    min-width: 100%;
  opacity: 0.4;
}

/* .intro-img:hover */
.intro:hover img.intro-img {
    opacity: 1;
}

.wrapper {
  height: 200px;
    min-height: 200px;
    position: relative;
  padding-bottom: 0;
}

.blue {
   background: #22428e;
    color: #fff;
}

.red{
     background: #de0e00;
    color: #fff;
}

.color3 {
  background: #f7c800;
    color: #fff;
}

#colors-content {
    height: 200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 330px;
    padding: 0 25px;
    margin-left: 3em;
}

h1 {
      text-transform: uppercase;
    font: 700 32px/35px 'Gotham SSm A','Gotham SSm B',Arial,Helvetica,sans-serif;
    margin: 0 0 34px;
  padding-top: 17px;
}

p {
  margin-top: -10px;
font-family: sans-serif;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  color: black;
}


@media screen and (max-width: 454px) {

  .wrapper {
    min-height: 100px;
    position: relative;
}


#colors-content {
  height: 200px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 0 25px;
margin-left: -4px;
}

  .pic1 {
    display: none;
}

}
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Gender Identity 3</title>



      <link rel="stylesheet" href="css/style-resources.css">


</head>

<body>
  <div class="container">
<header> 
<a href="index.html"> <img class="banner"  src="images/banner-light2.png"> </a>

</header>

<div id="wrap"> 

 <div id="tabwrap"> 
  <ul id="tabs">
   <li >
     <a href="index-terms.html" class="cyan">Terms</a>
   </li>

    <li>
     <a href="index-resources.html" class="green">Resources</a>
    </li> 

   <li>
     <a href="index-media.html" class="lav">Culture</a>
    </li> 

    <li>
      <a href="index-share.html" class="teal">Share</a>
    </li>

  </ul> 

  <div id="content"> 
    <div id="terms" class="animated"> <p>Bacon ipsum dolor amet ribeye short loin leberkas andouille jerky meatloaf pork spare ribs corned beef. Andouille ham hock ground round, shankle pastrami rump hamburger filet mignon. </p></div>
    <div id="resources" class="animated"><p>Access information providing links and other sources for those looking to reach out to others or simply learn more about gender Identitiy and orientation. </p></div>
    <div id="culture" class="animated"><p>Tuna, sculpin squeaker rice eel, lamprey triggerfish mooneye African glass catfish, loach wolf-eel yellowhead jawfish grass carp sea dragon neon tetra. Fingerfish forehead brooder sarcastic fringehead sixgill ray, scaly dragonfish bluntnose minnow.</p></div>
    <div id="share"  class="animated"> <p>Sausage ground round sirloin ham hock t-bone tongue strip steak meatloaf landjaeger shankle andouille. Turducken doner brisket, shank salami shoulder kevin filet mignon ball tip chicken.</p>
    </div> <!-- End of Div-->
   </div> <!-- End of Div-->
  </div><!-- End of Div-->

 <!-- Testing Share Content -->

<div class="container2">

<div class="intro">
  <div class="pic1">
     <img class="intro-img" src="https://s23.postimg.org/94clk2prf/resources_gender_spectrum2.png">
    </div> <!-- End pic1 -->
<div class="wrapper">
<article class="blue" id="colors-content">
  <div>
    <a href=""> <h1> Gender
      Spectrum.com </h1> </a>
    <p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash  hth as jasd ashd as ahsdjas r ajsgda  uaju ashd ujawh uu ajshdhuiae</p>
  </div>
</article><!-- End of article -->
</div><!-- End wrapper -->
  </div> <!-- End intro -->
<div class="intro">
  <div class="pic1">
     <img class="intro-img" src="https://s28.postimg.org/ku57tve0t/trevor.png">
    </div> <!-- End pic1 -->
<div class="wrapper">
<article class="red" id="colors-content">
  <div>
    <a href=""> <h1> Trevor Project </h1> </a>
    <p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash  hth as jasd ashd as ahsdjas r ajsgda  uaju ashd ujawh uu ajshdhuiae</p>
  </div>
</article><!-- End of article -->
</div><!-- End wrapper -->
  </div> <!-- End intro -->
</div> <!-- End intro -->
<div class="intro">
  <div class="pic1">
     <img class="intro-img" src="https://s23.postimg.org/enh4axo8r/image.png">
    </div> <!-- End pic1 -->
<div class="wrapper">
<article class="color3" id="colors-content">
  <div>
    <a href=""> <h1> AAUP.COM </h1> </a>
    <p> Understanding the rights and laws protecting individuals in the lgbt+ community</p>
  </div>
</article><!-- End of article -->
</div><!-- End wrapper -->
  </div> <!-- End intro -->

</div>


  <!-- Testing Share Content -->

  <!-- Footer -->
<footer class="info">
  <a href="index.html"> Home</a> | 
  <a href="index-terms.html"> Terms </a> | <a href="index-media.html">Media</a> | <a href="index-share.html" > Share</a>

  <p class="last-home"> | 2016 | Web Design</p>
</footer>


  </div> <!-- End of Div-->

</div> <!-- End of Div-->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script src="js/index-terms.js"></script>

</body>
</html>

Related Questions in HTML

Related Questions in CSS

Related Questions in HOVER

Related Questions in OPACITY

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Popular Questions

Copyright © 2021 Jogjafile Inc.