He realizado este acordeon, con una imagen de fondo en el head, y que cuando habre, tambien se expande la imagen, el problema consiste en que yo no puedo ( mejor dicho, no se) como agregarle un cuadro de texto centrado en la parte de abajo de cada imagen... ( y sin editar la imagen con power point) necesito ayuda urgentemente... debido a que es un evaluativo de la Uni... espero puedan ayudarme, adjuntare el codigo. y gracias de antemano...
------------------------------------------------------------------- HTML -----------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Patrimonio Natural</title>
<link rel="stylesheet" href="bootstrap/css/styl.css">
</head>
<ul class="acordeon">
<li style="background-image: url('http://www.notilogia.com/wp-content/uploads/2015/08/7221460798_d8356beb80_b.jpg');background-size: cover; background-position: center;">
<h4>LA CAYENA</h4>
<a href="#descripcion">
</a>
<div class="wp-content" id="descripcion">
<br>
<center><h3>Miguel Ángel Jusayú</h3></center>
<p> sadkladasdkladskjalkjsdlakjsdlaksdjaldksjalsdj</p>
</div>
</div>
</li>
<li style="background-image: url('http://www.saborgaitero.com/multimedia/images/zulianidad/relampago/congo_rel_mpago_76.ng.jpg');background-size: cover; background-position: center;">
<h4>EL RAYO DEL CATATUMBO</h4>
<a href="#">
</a>
</li>
<li style="background-image: url('http://www.notilogia.com/wp-content/uploads/2015/08/arbol-de-cocotero.jpg');background-size: cover; background-position: center;">
<h4>EL COCOTERO</h4>
<a href="#">
</a>
</li>
<li style="background-image: url('http://www.notilogia.com/wp-content/uploads/2015/08/Pelr.jpg');background-size: cover; background-position: center;">
<h4>EL BUCHON</h4>
<a href="#">
</a>
</li>
</ul>
<body>
</body>
</html>
---------------------------------------------- CSS --------------------------------------------------------------------------
/* Títulos pestañas */
ul.acordeon li h4 {
position: relative;
top: 5%;
z-index: 1;
margin: 0;
font-size: 18px;
text-align: left;
text-transform: uppercase;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 10% 120%;
-moz-transform-origin: 10% 120%;
transform-origin: 10% 120%;
white-space: nowrap;
}
}
/* Texto de Las Imagenes */
ul.acordeon li .descripcion {
top: 5%;
z-index: 1;
margin: 0;
font-size: 18px;
text-align: left;
display: none;
white-space: nowrap;
text-transform: uppercase;
}
/* Contenido inicialmente oculto */
ul.acordeon li a, ul.acordeon li img {
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 0;
padding:0;
background: #333;
}
/* Hover: Desplegamos elemento aumentando su ancho */
ul.acordeon li:hover {
width: 60%; /* 100 - 10*(nºelem-1) // X=60 para ratio imagen */
background: #333;
}
/* Hover: Hacemos que el título recupere la horizontal y le ponemos un fondo */
ul.acordeon li:hover h4 {
padding-left: 10px;
background: rgba(143,34,80,.
;color: #eee;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
/* Hover: Expandimos el contenido */
ul.acordeon li:hover .descripcion li:hover a, ul.acordeon li:hover a img {
width: 100%;
}
/* Ajustes para resoluciones pequeñas */
@media(max-width:600px) {
ul.acordeon li h4 {
font-size: 12px;
letter-spacing: 1px;
}
}
/* VARIACIONES PARA CONSEGUIR QUE EL MENU OCUPE INICIALMENTE TODO EL ANCHO
ul.acordeon li {
width: 20%;
}
ul.acordeon:hover li {
width: 10%;
}
ul.acordeon li:hover {
width: 60%;
}
*/
--------------------------------------------------------------------------------------------------------------------------
