Hola gente, tengo un problema, veran, estoy realizando un acordeón full Html y Css con la peculiaridad de que en el header del acordeon (donde van los títulos de pestañas,) también esta una imagen y al yo darle click, se expanda la imagen con u cuadro de texto y un boton centrados en la parte de abajo. mas nada, pero me persiste un problema, el cual es que al momento de darle click, la imagen se expande y todo genial, pero el texto o cualquier cosa que escriba ademas del titulo que esta en H4, NO SE VE.
Y SE DESNIVELA EN LA PARTE DE ABAJO, practicamente es como si se colocase invisible, NO SE QUE HACER y tengo examen de esto mañana, por favor AYUDENME! ADJUNTO EL CODIGO!
------------------------------------------------- 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;">
<h2>asksaksalksklsa</h2>
<h4>LA CAYENA</h4>
</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--------------------------------------
/* Ajustes generales */
html, body {
margin: 0;
padding:0;
background: #ccc;
}
ul.acordeon * {
font-family: Arial, sans-serif;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
/* Contenedor general */
ul.acordeon {
width: 100%; /* Personalizar ancho total */
overflow: hidden;
padding: 0;
background: #8F2250;
text-align: center;
list-style: none;
font-size: 0;
box-shadow: 0 0 10px #333;
}
/* Cada elemento */
ul.acordeon li {
position: relative;
display: inline-block;
*display: inline; zoom: 1; /* IE7 */
width: 10%;
height:0;
padding-bottom: 40%; /* Ratio aspecto imagen = (height*X)/width */
background: #eee;
text-align: center;
box-shadow: -2px 0px 8px #999;
}
/* 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;
}
ul.acordeon li h2 {
position: relative;
top: 5%;
z-index: 1;
display: inline-block;
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;
}
/* 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,.8);
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%;
}
*/-------------------------------------
POR FAVOR AYUDENME!
Tema: menú acordeón full Html y Css con header una imagen expandir al hacer click (Leído 5216 veces)
RSS -
WAP2