CODEWITHSUNDEEP
htmlcsshover
czmudzin
czmudzin

Reputation: 299

CSS Hover Caption Issue

The code is below:

CSS

.overlaytext {font-family: 'Raleway', sans-serif;}
body { height:100%; margin:0; padding:0; }
div.bg { position:fixed; width:50%; height:50% }
#NW { top:0;   left:0;   background-image: url('clevelandnight.jpg'); background-size:cover;}
#NE { top:0;   left:50%; background-image: url('news1.jpg'); background-size:cover;}
#SW { top:50%; left:0;   background-image: url('drinks1.jpg'); background-size:cover;}
#SE { top:50%; left:50%; background-image: url('clevelandday.jpg'); background-size:cover;}

.overlay {
  background:rgba(0,0,0,.75);
  opacity:0;
  height:100%;
  -webkit-transition: all .4s ease-out;  
  -moz-transition: all .4s ease-out;  
  -o-transition: all .4s ease-out;  
  -ms-transition: all .4s ease-out;  
  transition: all .4s ease-out;  
}
#nw:hover .overlay {
  opacity: 1;
  height:100%;
}
.caption {
font-color:white;
z-index:100;
}

HTML

<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <title>Craig Does Cleveland</title>
    <link href='stylesheet2.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div id='nw' class='bg'>
      <div class='overlay'>
      </div>
        <span class='caption'>Hello World</span>
    </div>
    <div id='ne' class='bg'>
      <div class='overlay'>
        <span class='caption'>Hello World</span>
      </div>
    </div>
        <div id='sw' class='bg'>
      <div class='overlay'>
        <span class='caption'>Hello World</span>
      </div>
    </div>
        <div id='se' class='bg'>
      <div class='overlay'>
        <span class='caption'>Hello World</span>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Views: 138

Answers (1)

dashtinejad
dashtinejad

Reputation: 6253

1) In your HTML markup, the 4 divs are not the same, change the first one to another:

<div id='nw' class='bg'>
    <div class='overlay'>
        <span class='caption'>Hello World</span>
    </div>
</div>

2) In your CSS, you used ID with uppercase, in your HTML they are in lowercase, change them:

#nw { top:0;   left:0;   background-image: url('clevelandnight.jpg'); background-size:cover;}
#ne { top:0;   left:50%; background-image: url('news1.jpg'); background-size:cover;}
#sw { top:50%; left:0;   background-image: url('drinks1.jpg'); background-size:cover;}
#se { top:50%; left:50%; background-image: url('clevelandday.jpg'); background-size:cover;}

3) You wrote hover only for the first element (nw), change it to work for all:

.bg:hover .overlay {
    opacity: 1;
    height:100%;
}

JSFiddle Demo.

Upvotes: 1

Related Questions