<p id="spoiler">Texto</p>

<style type="text/css"><!--

#spoiler { opacity:0; filter:alpha(opacity=0); }

#spoiler:hover { opacity:1.0; filter:alpha(opacity=100); }

--></style>

<div class="general"><img src="http://u.jimdo.com/www62/o/s54593b1f8c82bdd3/img/i406ccdafd7ffd018/1402577241/std/image.gif" alt="" />
<div class="mascara"><p>Tutorial de: www.todocursosonline.es</p></div></div>

<style type="text/css"><!--
.general .mascara { top: -200px; opacity: 0; -webkit-transition: all 0.3s ease-out 0.5s; -moz-transition: all 0.3s ease-out 0.5s; -o-transition: all 0.3s ease-out 0.5s; -ms-transition: all 0.3s ease-out 0.5s; transition: all 0.3s ease-out 0.5s; } .general:hover .mascara { opacity: 1; top: 0px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-animation: bounceY 0.9s linear; -moz-animation: bounceY 0.9s linear; -ms-animation: bounceY 0.9s linear; animation: bounceY 0.9s linear; }--></style>

<style type="text/css"><!--
.ma_boite3{
width:300px;
height:30px;
text-align:center;
overflow:hidden;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;}
.ma_boite3:hover{
width:460px;
height:480px;}
.title_box6{
font-size:18pt;
font-weight:bold;
text-align:center;
color:black;
background-image:
background-image: -webkit-gradient( linear, right top, right bottom, color-stop(0, #81BCE4), color-stop(0.5, #FFFFFF), color-stop(1, #DD84E6));
background-image: -o-linear-gradient(bottom, #81BCE4 0%, #FFFFFF 50%, #DD84E6 100%);
background-image: -moz-linear-gradient(bottom, #81BCE4 0%, #FFFFFF 50%, #DD84E6 100%);
background-image: -webkit-linear-gradient(bottom, #81BCE4 0%, #FFFFFF 50%, #DD84E6 100%);
background-image: -ms-linear-gradient(bottom, #81BCE4 0%, #FFFFFF 50%, #DD84E6 100%);
background-image: linear-gradient(to bottom, #81BCE4 0%, #FFFFFF 50%, #DD84E6 100%);
border: 1px solid black;
border-radius: 15px 15px 0px 0px;}
--></style>

<style type="text/css"><!--
.ma_boite3{
width:300px;
height:30px;
text-align:center;
overflow:hidden;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;}
.ma_boite3:hover{
width:460px;
height:380px;}
.title_box6{
font-size:18pt;
font-weight:bold;
text-align:center;
color:black;
background-image:
background-image: -webkit-gradient( linear, right top, right bottom, color-stop(0, #a9caec), color-stop(0.5, #FFFFFF), color-stop(1, #6b99c8));
background-image: -o-linear-gradient(bottom, #a9caec 0%, #FFFFFF 50%, #6b99c8 100%);
background-image: -moz-linear-gradient(bottom, #a9caec 0%, #FFFFFF 50%, #6b99c8 100%);
background-image: -webkit-linear-gradient(bottom, #a9caec 0%, #FFFFFF 50%, #6b99c8 100%);
background-image: -ms-linear-gradient(bottom, #a9caec 0%, #FFFFFF 50%, #6b99c8 100%);
background-image: linear-gradient(to bottom, #a9caec 0%, #FFFFFF 50%, #6b99c8 100%);
border: 1px dotted #ccc;
border-radius: 15px ;}
--></style>

<div id="hoverme">

<img src="https://lh4.googleusercontent.com/-nAh8l6HtbuQ/VOXq75-qGdI/AAAAAAABcxU/I_g9oeMPWfM/w86-h91-no/6.gif">

<p><div align="left">

<div style="margin-top: 5px; width: 430px; height: 200px; margin-left: 0px; overflow: auto; scrollbar-face-color: #ff0000; scrollbar-highlight-color: #565448; scrollbar-track-color: #565448; scrollbar-arrow-color: #000000;">

<p align="left">Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen,Texto, imagen, código...Texto, imagen, código...Texto, imagen, código...Texto, imagen, código... código...</div></div>

</div>

<style type="text/css"><!--  

html{
-webkit-font-smoothing: antialiased;
}
Body{
background-color: #eeeeee;
font-family: Edwardian Script ITC;
font-size: 22px;
}
h1{
margin: 0 auto;
text-align: center;
margin-top: 100px;
color: #545454;
font-weight: 800;
text-shadow: 3px 3px 3px rgba(255,255,255,0.3);
}
#hoverme{
width: 280px;
height: auto;
margin: 0 auto;
margin-top: 40px;
text-align: center;
background-color: #fff;
padding: 40px;
box-shadow: inset 0 0 14px rgba(0,0,0,0.2), 0 0 14px rgba(0,0,0,0.2);
border-radius: 20px;
}
#hoverme p{
opacity: 0;
transition:opacity 0.2s linear, margin 0.2s linear;
font-family: Edwardian Script ITC;
font-size: 22px;
font-style: italic;
color: #666666;
margin-top: 10px;
margin-bottom: 20px;
}
#hoverme:hover p{
opacity: 1;
margin-top: 20px;
margin-bottom: 10px;
}
#hoverme:hover{
cursor: pointer;
}
img{
border-radius: 20px;
box-shadow: #6d3112 2px 2px 11px;
border: 1px dotted #ccc; }
 --></style> 

<div id="spoiler" style="display: none;">
    Texto oculto</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"
title="Click to show/hide" type="button">Abrir/Cerrar</button>