noob noob - 21 days ago 6
CSS Question

make div a box element and let it show test on hover

This probably was already asked but I just can't get past this.
Im a complete noob in css but I hope you can help me..

So I want to show 14 "element boxes (with separate background etc)" and if i hover on it, it shows a bit of text my problem is that the div just shows under a iframe object (which is from top to bottom)

http://pastebin.com/WmbPZ3AV


I've made an image on what I already have and what I want so you guys may be able to understand it easier

https://gyazo.com/cbd9d293b05233aba331731bcbfa81a8
I already made 1 & 2.
I hope you can help me create the 3rd part :)

Answer

Css class name should start with a character. And use display : inline-block; when you want the width to be fixed to what you set.

here is the code example

 
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="Mein Projekt zu Australien.">
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
        <style>
 
    html {
  background: url(bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
            iframe {
              float:left;
               clear:left;
            }    
           
            .test {
               width: 150px;
               height: 150px;
               margin: auto;
               border-spacing: 15px;
               border-style: ridge;
              float:left;
            }    
 
.showme{
display: none;
}
.showhim:hover .showme{
display : inline-block;
}
 
.row:hover .select{
    display: block
}
 
.select{
    display: none;
}
    </style>
    </head>
    <body>
<iframe src="links.html" width="200" height="1000px"></iframe>
        <div class="test showhim">Hover me <div class="1 showme">Hi </div></div> </body>
</html>

You have to dig more on css and html.