CSS reveal on hover HTML content - html

Question

I'm wanting to create some boxed content that reveals alternate content when hovered. I've found a few examples from others questions, and tried to utilise them to what I want, but not having much luck.
The perfect example of what I'm trying to achieve is the 3 hover buttons under the "Build a Smarter WordPress Site" (just below the fold) on http://www.copyblogger.com/.
I'm assuming the static state includes an icon/image & text below, and the hover state includes an icon/image, descriptive text, and a hyperlinked button.
This is exactly what I'm wanting to reproduce. Could anyone please provide an example of this so I can understand what I need to do?
Thanks.
Edit: I understand the code Copyblogger have used from what little I can retrieve through "Inspect Element". I'm not looking to use their code - as I cannot find all the connecting commands, but something that acts the same way.

Answer 1

for code sample that showed in your sent link
<li class="design">
<div class="icon">Design</div>
<p>The Genesis design framework, support and dozens of stunning themes.</p><div class="btn-primary-small">Find Out More</div>
</li>
the css will be
li.design a{
display:none;
}
li.design:hover a{
display:block;
}

Answer 2

Here is a fiddle. There are 3 or 4 ways to do this, but you just want someone to do it for you, so I wont go into those specifics. I wrote it mobile first and assuming you can use box-sizing: border-box; - so if you can't do that - then you just add the proper widths and you'll be good to go.
HTML
<a href="#" class="block-icon">
<div class="block top-stuff">
<div class="text-w">
Top stuff
</div>
</div>
<div class="block under-stuff">
<div class="text-w">
<h4>Under stuff</h4>
<p>Some paragraph</p>
<div class="button">Call to action</div>
</div>
</div>
</a>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
.block-icon {
position: relative;
display: block;
width: 100%;
float: left;
border: 1px solid red;
text-align: center;
height: 10em;
margin-bottom: 1em;
}
.block-icon .block {
height: 100%;
padding: .5em;
}
.block-icon .text-w {
width: 100%;
height: 100%;
display: inline-block;
vertical-align: middle;
border: 1px solid blue;
}
.block-icon .text-w:after {
content: "\0020";
height: 100%;
display: inline-block;
vertical-align: middle;
/* this creates a second element so that they can align vertical middle to one another */
}
.top-stuff {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: white;
opacity: 1;
transition: opacity .5s linear;
}
.under-stuff {
background-color: #eee;
}
a:hover .top-stuff {
opacity: 0;
transition: opacity .1s linear;
}
.button {
width: auto;
border: 1px solid black;
}
#media (min-width: 500px) {
.block-icon {
width: 32%;
margin-right: 2%;
}
.block-icon:nth-of-type(3) {
margin-right: 0;
}
} /* end break-point */