CODEWITHSUNDEEP
htmlcss
Henry Brown
Henry Brown

Reputation: 2237

Adding a rollover only works on one image div

I am creating a rollover on an image div where once you roll over, the image opacity goes down and text over the top appears. This works fine for just one image, but when trying it on more then one image the opacity doesn't work correctly and the text doesn't seem to appear on the other images.

HTML:

 <div class="worklongdiv" style="padding-top:111px";>
    <img src="images/Vividworklong.jpg"/>
    <div class="work-text-content-long">
      <header>VIVID VAPOURS</header>
      <p style="font-size:17px; font-family:GothamRoundedBold;">Branding • Product Dev • Web Dev</p>
    </div> 
  </div>
  <div class="worklongdiv" >
    <img src="images/Vividworklong.jpg"/>
    <div class="work-text-content-long">
      <header>VIVID VAPOURS</header>
      <p style="font-size:17px; font-family:GothamRoundedBold;">Branding • Product Dev • Web Dev</p>
    </div> 
   </div>

CSS:

.worklongdiv{
    width: 100%;
    min-height: 120px;
    max-height:auto
    position: relative;
    background-color: black;  
 }  

.worklongdiv:hover img {
    opacity: 0.3;
}

.worklongdiv:hover .work-text-content-long {
    opacity: 1; 
}

.worklongdiv img {
    padding: 0;
    width: 100%;
    display: block;
    opacity: 1;
}

.worklongdiv img,
.work-text-content-long {
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.work-text-content-long {
    height:100px;
    position: absolute;
    color: white;
    left: 0;
    top: 25%;
    right: 0%;
    left:101px;
    bottom: 0;
    font-size: 24px;
    text-align: left;
    opacity: 0;
}

Upvotes: 1

Views: 31

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62781

You're missing a ; in one of your CSS rules. 

.worklongdiv{
  width: 100%;
  min-height: 120px;
  max-height:auto;
  position: relative;
  background-color: black;
}

Upvotes: 1

Related Questions