How to get hovered images into background ?

Question

@charset "utf-8";

html{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

body {
 background: #F2F2F2; 
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 font-family: expresswayregular;
}

@font-face {
    font-family: 'expresswayregular';
    src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
         url('fonts/expressway_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#header {
 position: fixed;
 background: #333333;
 width: 100%;
 height: 50px;
 padding: 0;
 margin: 0;
 top: 0;
}

#header-content {
 background: #333333;
 width: 1280px;
 height: 50px;
 margin-left: auto;
 margin-right: auto;
}

#logo {
 position: absolute;
}

#currentsite-info font {
 position: absolute;
 height: 30px;
 width: auto;
 margin-left: 60px;
 padding: 10px;
 color: #fff;
 font-size: 26px;
}

#search-box {
 width: 400px;
 height: 50px;
 margin-right: auto;
 margin-left: auto;
}

#search {
 background: #fff;
 width: 356px;
 height: 16px;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 6px;
 border: 1px solid #fff;
 border-radius: 6px 0 0 6px; 
}

#submit {
 float: right;
 background: #fff;
 width: 29px;
 height: 28px;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 0;
 border-top: 1px solid #fff;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 border-radius: 0 6px 6px 0; 
}

#menu {
 margin-right: 30px;
 margin-left: 25px;
 z-index: 1000;
}

.menu-linkbox a{
 position: static;
 float: right;
 width: 60px;
 height: 14px;
 top: 0;
 padding: 18px 15px 18px 15px;
 color: #F2F2F2;
 font-size: 14px;
 text-decoration: none;
 text-align: center;
}

.menu-linkbox:hover a {
 color: #2997D3;
 transition: all 500ms;
}

#menu-linkbox-live a {
 color: #2997D3;
}

#main-content {
 background: #fff;
    min-height: 100%;
    width: 1280px;
    margin: 0 auto;
 padding-top: 50px;
 overflow: auto;
}

#content-articles {
 background: #F2F2F2;
 width: 1220px;
 bottom: 0;
 margin: 20px;
 padding: 10px;
 border: 1px solid #000;
 overflow: auto;
}

#article1 {
 width: 550px;
 margin: 10px;
 float: left;
 text-align: justify;
 word-spacing: 4px;
}

#article1 h1 {
 font-size: 40px;
}

#article1-content {
 width: 100%;
}

#photo1 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
}

#photo1:hover {
 opacity: 0.8;
}

#article2 {
 width: 550px;
 margin: 10px;
 float: right;
 text-align: justify;
 word-spacing: 4px;
}

#article2 h1 {
 font-size: 40px;
}

#article2-content {
 width: 100%;
}

#photo2 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
 z-index: -1000;
}

#photo2:hover {
 opacity: 0.8;
}

#article3 {
 width: 550px;
 margin: 60px 10px 10px 10px;
 float: left;
 text-align: justify;
 word-spacing: 4px;
}

#article3 h1 {
 font-size: 40px;
}

#article3-content {
 width: 100%;
}

#photo3 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
 z-index: -1000;
}

#photo3:hover {
 opacity: 0.8;
}

#article4 {
 width: 550px;
 margin: 60px 10px 10px 10px;
 float: right;
 text-align: justify;
 word-spacing: 4px;
}

#article4 h1 {
 font-size: 40px;
}

#article4-content {
 width: 100%;
}

#photo4 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
 z-index: -1000;
}

#photo4:hover {
 opacity: 0.8;
}

#imprint {
 background: #333333;
 bottom: 0;
 width: 100%;
}

#imprint-content {
 background: #333333;
 width: 1280px;
 height: 150px;
 margin: auto;
}

#about-info {
 width: 300px;
 height: 130px;
 float: left;
 margin-left: 20px;
 padding: 10px 20px 10px 20px;
 vertical-align: middle;
 font-size: 18px;
 text-align: justify;
 color: #fff;
}

#about-info h2 {
 text-align: center;
}

#about-info p {
 margin: 20px;
 text-align: center;
 vertical-align: middle;
}

#contact-info {
 position: static;
 width: 300px;
 height: 130px;
 margin-right: auto;
 margin-left: auto;
 padding: 10px 20px 10px 20px;
 vertical-align: middle;
 font-size: 18px;
 text-align: justify;
 color: #fff;
}

#contact-info h2 {
 text-align: center;
}

#contact-info p {
 margin: 20px;
 text-align: center;
 vertical-align: middle;
}


#legal-info {
 width: 300px;
 height: 130px;
 float: right;
 margin-right: 20px;
 padding: 10px 20px 10px 20px;
 vertical-align: middle;
 font-size: 18px;
 text-align: justify;
 color: #fff;
}

#legal-info h2 {
 text-align: center;
}

#legal-info p {
 margin: 20px;
 text-align: center;
 vertical-align: middle;
}

h1 {
 color: #2997D3;
 font-size: 20px;
 text-align: center;
 margin-bottom: 20px;  
}

p {
 margin: 20px; 
}

a {
 color: #2997D3;
}

<!doctype html>
<html>

 <head> 
 
  <meta charset="utf-8">
  
  <link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
  
  <link rel="icon" href="images/logo_site.png">
  
  <title>Topics</title>
 
  <script>
   function toggleNavPanel(x){
    var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
    if(panel.style.height == maxH){
     panel.style.height = "0px";
     navarrow.innerHTML = "&#9662;";
    } 
   
    else {
     panel.style.height = maxH;
     navarrow.innerHTML = "&#9652;";
    }
   }
  </script>
 
 </head>
 
 <body>
 
  <div id="header">
  
   <div id="header-content">
  
    <img id ="logo" src="images/logo.png" />
    
    <div id="currentsite-info">
    
     <font>Topics</font>
    
    </div>
    
    <div id="menu">     
     
     <div class="menu-linkbox" id="menu-linkbox-breaking"><a href="../Breaking/index_breaking.html">Breaking</a></div>
      
     <div class="menu-linkbox" id="menu-linkbox-live"><a href="index_topics.html">Topics</a></div> 

     <div class="menu-linkbox" id="menu-linkbox-scene"><a href="../News/index_news.html">News</a></div>

     <div class="menu-linkbox" id="menu-linkbox-home"><a href="../../index.html">Overview</a></div>
     
    </div>
    
    <div id="search-box">
   
     <form action="http://www.google.com/search" method="get">
   
      <input id="search" type="text" name="q" placeholder="Search">
   
      <input id="submit" type="image" src="images/search.png" alt="Submit">
   
     </form>
   
    </div>
   
   </div>
   
  </div>
  
  <div id="main-content">
  
   <div id="content-articles">
   
    <div id="article1"> 
    
     <div id="article1-content">
      
      <h1>Politics</h1>
      
     </div>
     
     <div id="article1-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo1" src="images/footage/topic1adjusted.jpeg" /></a>
      
     </div>
   
    </div>
    
    <div id="article2"> 
    
     <div id="article2-content">
      
      <h1>Healthcare</h1>
      
     </div>
     
     <div id="article2-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo2" src="images/footage/topic2.jpeg" /></a>
      
     </div>
   
    </div>
    
    <div id="article3"> 
    
     <div id="article3-content">
      
      <h1>Network</h1>
      
     </div>
     
     <div id="article3-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo3" src="images/footage/topic3adjusted.jpeg" /></a>
      
     </div>
   
    </div>
    
    <div id="article4"> 
    
     <div id="article4-content">
      
      <h1>Travel</h1>
      
     </div>
     
     <div id="article4-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo4" src="images/footage/topic4adjusted.jpeg" /></a>
      
     </div>
   
    </div>
   
   </div>
  
  </div>
  
  <div id="imprint">
   
   <div id="imprint-content">
   
    <div id="about-info">
      
     <h2>About Us</h2>
   
     <p>
   
      Company information 

     </p>
      
    </div>
    
    <div id="legal-info">
      
     <h2>Legal Use</h2>
   
     <p>
   
      Copyright information
   
     </p>
      
    </div>
    
    <div id="contact-info">
      
     <h2>Contact</h2>
   
     <p>
   
      Contact information 

     </p>
      
    </div>
   
   </div> 

  </div>
 
 </body>

</html>

Hello I have given you a snippet with my current website. It has 4 pictures and a fixed header. When you hover over the picture their opacity is being changed (1->0.8). My problem is that they are also goin over the header... I tried using a z-index but it's not working, any ideas on how to get them behind the header ?

score 2 · Answer 1 · edited May 23 '17 at 12:31

z-index only works on positioned elements

So, I've added position: relative to #photo1 and z-index: 1 to header. Bonus - added a link to hosted photo instead of the non-working local paths you gave, so you can see it work.

@charset "utf-8";

html{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

body {
 background: #F2F2F2; 
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 font-family: expresswayregular;
}

@font-face {
    font-family: 'expresswayregular';
    src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
         url('fonts/expressway_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#header {
 position: fixed;
 background: #333333;
 width: 100%;
 height: 50px;
 padding: 0;
 margin: 0;
 top: 0;
    z-index: 1;
}

#header-content {
 background: #333333;
 width: 1280px;
 height: 50px;
 margin-left: auto;
 margin-right: auto;
}

#logo {
 position: absolute;
}

#currentsite-info font {
 position: absolute;
 height: 30px;
 width: auto;
 margin-left: 60px;
 padding: 10px;
 color: #fff;
 font-size: 26px;
}

#search-box {
 width: 400px;
 height: 50px;
 margin-right: auto;
 margin-left: auto;
}

#search {
 background: #fff;
 width: 356px;
 height: 16px;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 6px;
 border: 1px solid #fff;
 border-radius: 6px 0 0 6px; 
}

#submit {
 float: right;
 background: #fff;
 width: 29px;
 height: 28px;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 0;
 border-top: 1px solid #fff;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 border-radius: 0 6px 6px 0; 
}

#menu {
 margin-right: 30px;
 margin-left: 25px;
 z-index: 1000;
}

.menu-linkbox a{
 position: static;
 float: right;
 width: 60px;
 height: 14px;
 top: 0;
 padding: 18px 15px 18px 15px;
 color: #F2F2F2;
 font-size: 14px;
 text-decoration: none;
 text-align: center;
}

.menu-linkbox:hover a {
 color: #2997D3;
 transition: all 500ms;
}

#menu-linkbox-live a {
 color: #2997D3;
}

#main-content {
 background: #fff;
    min-height: 100%;
    width: 1280px;
    margin: 0 auto;
 padding-top: 50px;
 overflow: auto;
}

#content-articles {
 background: #F2F2F2;
 width: 1220px;
 bottom: 0;
 margin: 20px;
 padding: 10px;
 border: 1px solid #000;
 overflow: auto;
}

#article1 {
 width: 550px;
 margin: 10px;
 float: left;
 text-align: justify;
 word-spacing: 4px;
}

#article1 h1 {
 font-size: 40px;
}

#article1-content {
 width: 100%;
}

#photo1 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
    position: relative;
}

#photo1:hover {
 opacity: 0.8;
}

#article2 {
 width: 550px;
 margin: 10px;
 float: right;
 text-align: justify;
 word-spacing: 4px;
}

#article2 h1 {
 font-size: 40px;
}

#article2-content {
 width: 100%;
}

#photo2 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
 z-index: -1000;
}

#photo2:hover {
 opacity: 0.8;
}

#article3 {
 width: 550px;
 margin: 60px 10px 10px 10px;
 float: left;
 text-align: justify;
 word-spacing: 4px;
}

#article3 h1 {
 font-size: 40px;
}

#article3-content {
 width: 100%;
}

#photo3 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
 z-index: -1000;
}

#photo3:hover {
 opacity: 0.8;
}

#article4 {
 width: 550px;
 margin: 60px 10px 10px 10px;
 float: right;
 text-align: justify;
 word-spacing: 4px;
}

#article4 h1 {
 font-size: 40px;
}

#article4-content {
 width: 100%;
}

#photo4 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
 z-index: -1000;
}

#photo4:hover {
 opacity: 0.8;
}

#imprint {
 background: #333333;
 bottom: 0;
 width: 100%;
}

#imprint-content {
 background: #333333;
 width: 1280px;
 height: 150px;
 margin: auto;
}

#about-info {
 width: 300px;
 height: 130px;
 float: left;
 margin-left: 20px;
 padding: 10px 20px 10px 20px;
 vertical-align: middle;
 font-size: 18px;
 text-align: justify;
 color: #fff;
}

#about-info h2 {
 text-align: center;
}

#about-info p {
 margin: 20px;
 text-align: center;
 vertical-align: middle;
}

#contact-info {
 position: static;
 width: 300px;
 height: 130px;
 margin-right: auto;
 margin-left: auto;
 padding: 10px 20px 10px 20px;
 vertical-align: middle;
 font-size: 18px;
 text-align: justify;
 color: #fff;
}

#contact-info h2 {
 text-align: center;
}

#contact-info p {
 margin: 20px;
 text-align: center;
 vertical-align: middle;
}


#legal-info {
 width: 300px;
 height: 130px;
 float: right;
 margin-right: 20px;
 padding: 10px 20px 10px 20px;
 vertical-align: middle;
 font-size: 18px;
 text-align: justify;
 color: #fff;
}

#legal-info h2 {
 text-align: center;
}

#legal-info p {
 margin: 20px;
 text-align: center;
 vertical-align: middle;
}

h1 {
 color: #2997D3;
 font-size: 20px;
 text-align: center;
 margin-bottom: 20px;  
}

p {
 margin: 20px; 
}

a {
 color: #2997D3;
}

<!doctype html>
<html>

 <head> 
 
  <meta charset="utf-8">
  
  <link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
  
  <link rel="icon" href="images/logo_site.png">
  
  <title>Topics</title>
 
  <script>
   function toggleNavPanel(x){
    var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
    if(panel.style.height == maxH){
     panel.style.height = "0px";
     navarrow.innerHTML = "&#9662;";
    } 
   
    else {
     panel.style.height = maxH;
     navarrow.innerHTML = "&#9652;";
    }
   }
  </script>
 
 </head>
 
 <body>
 
  <div id="header">
  
   <div id="header-content">
  
    <img id ="logo" src="images/logo.png" />
    
    <div id="currentsite-info">
    
     <font>Topics</font>
    
    </div>
    
    <div id="menu">     
     
     <div class="menu-linkbox" id="menu-linkbox-breaking"><a href="../Breaking/index_breaking.html">Breaking</a></div>
      
     <div class="menu-linkbox" id="menu-linkbox-live"><a href="index_topics.html">Topics</a></div> 

     <div class="menu-linkbox" id="menu-linkbox-scene"><a href="../News/index_news.html">News</a></div>

     <div class="menu-linkbox" id="menu-linkbox-home"><a href="../../index.html">Overview</a></div>
     
    </div>
    
    <div id="search-box">
   
     <form action="http://www.google.com/search" method="get">
   
      <input id="search" type="text" name="q" placeholder="Search">
   
      <input id="submit" type="image" src="images/search.png" alt="Submit">
   
     </form>
   
    </div>
   
   </div>
   
  </div>
  
  <div id="main-content">
  
   <div id="content-articles">
   
    <div id="article1"> 
    
     <div id="article1-content">
      
      <h1>Politics</h1>
      
     </div>
     
     <div id="article1-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo1" src="http://www.mtv.com/crop-images/2013/09/11/Foo%20Fighters%20officail.jpg" /></a>
      
     </div>
   
    </div>
    
    <div id="article2"> 
    
     <div id="article2-content">
      
      <h1>Healthcare</h1>
      
     </div>
     
     <div id="article2-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo2" src="images/footage/topic2.jpeg" /></a>
      
     </div>
   
    </div>
    
    <div id="article3"> 
    
     <div id="article3-content">
      
      <h1>Network</h1>
      
     </div>
     
     <div id="article3-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo3" src="images/footage/topic3adjusted.jpeg" /></a>
      
     </div>
   
    </div>
    
    <div id="article4"> 
    
     <div id="article4-content">
      
      <h1>Travel</h1>
      
     </div>
     
     <div id="article4-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo4" src="images/footage/topic4adjusted.jpeg" /></a>
      
     </div>
   
    </div>
   
   </div>
  
  </div>
  
  <div id="imprint">
   
   <div id="imprint-content">
   
    <div id="about-info">
      
     <h2>About Us</h2>
   
     <p>
   
      Company information 

     </p>
      
    </div>
    
    <div id="legal-info">
      
     <h2>Legal Use</h2>
   
     <p>
   
      Copyright information
   
     </p>
      
    </div>
    
    <div id="contact-info">
      
     <h2>Contact</h2>
   
     <p>
   
      Contact information 

     </p>
      
    </div>
   
   </div> 

  </div>
 
 </body>

</html>

If you give an element `z-index` it must have a `position` attribute. — OST, Feb 27 '17 at 19:47

BFG · Accepted Answer · 2017-02-27T19:51:23.283

I added z-index properties to your #header and #main-content css classes and there is no longer any overlap on hover.

I've also removed the z-index values you set on the images themselves (#photo1 etc) as the z-index set on #main-content applies to them as well, as they are its children.

Hope this helps.

@charset "utf-8";

html{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

body {
 background: #F2F2F2; 
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 font-family: expresswayregular;
}

@font-face {
    font-family: 'expresswayregular';
    src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
         url('fonts/expressway_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#header {
 position: fixed;
 background: #333333;
 width: 100%;
 height: 50px;
 padding: 0;
 margin: 0;
 top: 0;
  z-index: 1;
}

#header-content {
 background: #333333;
 width: 1280px;
 height: 50px;
 margin-left: auto;
 margin-right: auto;
}

#logo {
 position: absolute;
}

#currentsite-info font {
 position: absolute;
 height: 30px;
 width: auto;
 margin-left: 60px;
 padding: 10px;
 color: #fff;
 font-size: 26px;
}

#search-box {
 width: 400px;
 height: 50px;
 margin-right: auto;
 margin-left: auto;
}

#search {
 background: #fff;
 width: 356px;
 height: 16px;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 6px;
 border: 1px solid #fff;
 border-radius: 6px 0 0 6px; 
}

#submit {
 float: right;
 background: #fff;
 width: 29px;
 height: 28px;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 0;
 border-top: 1px solid #fff;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 border-radius: 0 6px 6px 0; 
}

#menu {
 margin-right: 30px;
 margin-left: 25px;
 z-index: 1000;
}

.menu-linkbox a{
 position: static;
 float: right;
 width: 60px;
 height: 14px;
 top: 0;
 padding: 18px 15px 18px 15px;
 color: #F2F2F2;
 font-size: 14px;
 text-decoration: none;
 text-align: center;
}

.menu-linkbox:hover a {
 color: #2997D3;
 transition: all 500ms;
}

#menu-linkbox-live a {
 color: #2997D3;
}

#main-content {
 background: #fff;
    min-height: 100%;
    width: 1280px;
    margin: 0 auto;
 padding-top: 50px;
 overflow: auto;
  z-index: -1;
}

#content-articles {
 background: #F2F2F2;
 width: 1220px;
 bottom: 0;
 margin: 20px;
 padding: 10px;
 border: 1px solid #000;
 overflow: auto;
}

#article1 {
 width: 550px;
 margin: 10px;
 float: left;
 text-align: justify;
 word-spacing: 4px;
}

#article1 h1 {
 font-size: 40px;
}

#article1-content {
 width: 100%;
}

#photo1 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
}

#photo1:hover {
 opacity: 0.8;
}

#article2 {
 width: 550px;
 margin: 10px;
 float: right;
 text-align: justify;
 word-spacing: 4px;
}

#article2 h1 {
 font-size: 40px;
}

#article2-content {
 width: 100%;
}

#photo2 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
}

#photo2:hover {
 opacity: 0.8;
}

#article3 {
 width: 550px;
 margin: 60px 10px 10px 10px;
 float: left;
 text-align: justify;
 word-spacing: 4px;
}

#article3 h1 {
 font-size: 40px;
}

#article3-content {
 width: 100%;
}

#photo3 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
}

#photo3:hover {
 opacity: 0.8;
}

#article4 {
 width: 550px;
 margin: 60px 10px 10px 10px;
 float: right;
 text-align: justify;
 word-spacing: 4px;
}

#article4 h1 {
 font-size: 40px;
}

#article4-content {
 width: 100%;
}

#photo4 {
 width: 500px;
 height: 500px;
 margin: 0px auto;
 border: 2px solid #2997D3;
 display: block;
 transition: all 500ms;
}

#photo4:hover {
 opacity: 0.8;
}

#imprint {
 background: #333333;
 bottom: 0;
 width: 100%;
}

#imprint-content {
 background: #333333;
 width: 1280px;
 height: 150px;
 margin: auto;
}

#about-info {
 width: 300px;
 height: 130px;
 float: left;
 margin-left: 20px;
 padding: 10px 20px 10px 20px;
 vertical-align: middle;
 font-size: 18px;
 text-align: justify;
 color: #fff;
}

#about-info h2 {
 text-align: center;
}

#about-info p {
 margin: 20px;
 text-align: center;
 vertical-align: middle;
}

#contact-info {
 position: static;
 width: 300px;
 height: 130px;
 margin-right: auto;
 margin-left: auto;
 padding: 10px 20px 10px 20px;
 vertical-align: middle;
 font-size: 18px;
 text-align: justify;
 color: #fff;
}

#contact-info h2 {
 text-align: center;
}

#contact-info p {
 margin: 20px;
 text-align: center;
 vertical-align: middle;
}


#legal-info {
 width: 300px;
 height: 130px;
 float: right;
 margin-right: 20px;
 padding: 10px 20px 10px 20px;
 vertical-align: middle;
 font-size: 18px;
 text-align: justify;
 color: #fff;
}

#legal-info h2 {
 text-align: center;
}

#legal-info p {
 margin: 20px;
 text-align: center;
 vertical-align: middle;
}

h1 {
 color: #2997D3;
 font-size: 20px;
 text-align: center;
 margin-bottom: 20px;  
}

p {
 margin: 20px; 
}

a {
 color: #2997D3;
}

<!doctype html>
<html>

 <head> 
 
  <meta charset="utf-8">
  
  <link rel="stylesheet" type="text/css" href="stylesheet_topics.css">
  
  <link rel="icon" href="images/logo_site.png">
  
  <title>Topics</title>
 
  <script>
   function toggleNavPanel(x){
    var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
    if(panel.style.height == maxH){
     panel.style.height = "0px";
     navarrow.innerHTML = "&#9662;";
    } 
   
    else {
     panel.style.height = maxH;
     navarrow.innerHTML = "&#9652;";
    }
   }
  </script>
 
 </head>
 
 <body>
 
  <div id="header">
  
   <div id="header-content">
  
    <img id ="logo" src="images/logo.png" />
    
    <div id="currentsite-info">
    
     <font>Topics</font>
    
    </div>
    
    <div id="menu">     
     
     <div class="menu-linkbox" id="menu-linkbox-breaking"><a href="../Breaking/index_breaking.html">Breaking</a></div>
      
     <div class="menu-linkbox" id="menu-linkbox-live"><a href="index_topics.html">Topics</a></div> 

     <div class="menu-linkbox" id="menu-linkbox-scene"><a href="../News/index_news.html">News</a></div>

     <div class="menu-linkbox" id="menu-linkbox-home"><a href="../../index.html">Overview</a></div>
     
    </div>
    
    <div id="search-box">
   
     <form action="http://www.google.com/search" method="get">
   
      <input id="search" type="text" name="q" placeholder="Search">
   
      <input id="submit" type="image" src="images/search.png" alt="Submit">
   
     </form>
   
    </div>
   
   </div>
   
  </div>
  
  <div id="main-content">
  
   <div id="content-articles">
   
    <div id="article1"> 
    
     <div id="article1-content">
      
      <h1>Politics</h1>
      
     </div>
     
     <div id="article1-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo1" src="images/footage/topic1adjusted.jpeg" /></a>
      
     </div>
   
    </div>
    
    <div id="article2"> 
    
     <div id="article2-content">
      
      <h1>Healthcare</h1>
      
     </div>
     
     <div id="article2-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo2" src="images/footage/topic2.jpeg" /></a>
      
     </div>
   
    </div>
    
    <div id="article3"> 
    
     <div id="article3-content">
      
      <h1>Network</h1>
      
     </div>
     
     <div id="article3-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo3" src="images/footage/topic3adjusted.jpeg" /></a>
      
     </div>
   
    </div>
    
    <div id="article4"> 
    
     <div id="article4-content">
      
      <h1>Travel</h1>
      
     </div>
     
     <div id="article4-photo">
     
      <a href="https://www.youtube.com/"><img id ="photo4" src="images/footage/topic4adjusted.jpeg" /></a>
      
     </div>
   
    </div>
   
   </div>
  
  </div>
  
  <div id="imprint">
   
   <div id="imprint-content">
   
    <div id="about-info">
      
     <h2>About Us</h2>
   
     <p>
   
      Company information 

     </p>
      
    </div>
    
    <div id="legal-info">
      
     <h2>Legal Use</h2>
   
     <p>
   
      Copyright information
   
     </p>
      
    </div>
    
    <div id="contact-info">
      
     <h2>Contact</h2>
   
     <p>
   
      Contact information 

     </p>
      
    </div>
   
   </div> 

  </div>
 
 </body>

</html>

How to get hovered images into background ?

2 Answers2