You are really confusing the browser there. When you hover over #A, #A_hidden appears, but #A immediately disappears, and so #A_hidden disappears because you aren’t hovering over #A any more … meaning that #A reappears … and you are in a loop.
So the question is, what are you really trying to achieve? Because what you’ve written doesn’t make sense.
Big thx. I understood my mistake. But if I want to leave a background color (for example black), the content of div#A will still be visible. What to do? How can I hide it? As in this case can vertical center the content of hidden div?
You could just hide it with a black background on the hovered div. However if you want to actually hide the content and not touch the background you would need to put that content into another element and then hide it.
See Franky’s example above if you need to support older browsers (IE7-) otherwise I would do it like this for IE8+ without using a table as this is not tabular data and an html table is not really appropriate.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html, body {
background:#000;
color:#fff;
height:100%;
margin:0;
}
ul.blocks {
margin:0;
padding:0;
list-style:none;
height:100%;
}
ul.blocks li {
width:25%;
height:25%;
float:left;
display:table;
}
ul.blocks li b, ul.blocks li span {
display:table-cell;
width:100%;
height:100%;
vertical-align:middle;
text-align:center;
font-size:1.2em;
}
ul.blocks li b { font-size:100px }
ul.blocks li span { display:none; }
ul.blocks li:hover b { display:none }
ul.blocks li:hover span { display:table-cell }
</style>
</head>
<body>
<ul class="blocks">
<li><b>A</b><span>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet ..</span></li>
<li><b>L</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>E</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>X</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>A</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>N</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>D</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>E</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>R</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>S</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>O</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>R</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>O</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>K</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>I</b><span>Lorem ipsum dolor sit amet..</span></li>
<li><b>N</b><span>Lorem ipsum dolor sit amet..</span></li>
</ul>
</body>
</html>
However if you need to support IE7 and under then a table would be the easiest solution rather than adding a number of hacks.
Or you could just take this in a whole different direction, if you dont mind employing a bit more CSS trickery.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
body, html, .contents {padding: 0; margin: 0; height: 100%; background: #000}
.letter{ float:left; height: 25%; width: 25%; line-height: 1 ; overflow: hidden}
.letter p{ display:inline-block; width: 1px; vertical-align: middle; height:100%; padding:0; margin:0;}
.letter:before {content:"A"; color:#fff; display: inline-block; width: 100%; margin-right:-.06em; text-align: center; vertical-align: middle; font-weight:bold; font-size: 600%; ; }
.A:before {content:"A"; }
.L:before {content:"L"; }
.E:before {content:"E"; }
.X:before {content:"X"; }
.N:before {content:"N"; }
.D:before {content:"D"; }
.R:before {content:"R"; }
.S:before {content:"S"; }
.O:before {content:"O"; }
.K:before {content:"K"; }
.I:before {content:"I"; }
.letter:hover:before{ content:none;}
.letter:hover{background: #fff}
.letter:hover p{ height: auto; width: 100%; }
h1 {position: absolute; left: -999999em;}
</style>
</head>
<body>
<h1>Alex ...</h1>
<div class='contents'>
<div class="letter A">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter L">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter E">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter X">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter A">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter N">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter D">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter E">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter R">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter S">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter O">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter R">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter O">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter K">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter I">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
<div class="letter N">
<p>paragraph 1 of 16, or this could be a div with multiple paragraph. you get the idea</p>
</div>
</div>
</div>
</body>
</html>
This is probably a bit more versatile anyway. Hope that helps
Big thx for the this work! It great example. But I want to have to go to the DIV’s layout While studying and going to try to make the grid for responsive. Paul O’B, big thx for help! It’s great. This code is really short and easy. dresden_phoenix, I know the “before” is not supported by older browsers? Thanks for the code. What it better?
:before/:after is supported by everything except IE7 and below. However if that is a major concer you can add this (best to do it on a conditional style sheet)
The basic reason why I pursued an alternate solution is structure and semantics. In my way you have a headline and some paragraphs and no random scattered “letters”. It will also allows for greater flexibility in case you need alternate layouts.