<style>
/* Estilos generales */
.accordion-container {
width: 80%;
margin: 20px auto;
text-align: center;
font-family: Arial, sans-serif;
}
/* Ocultar el input para usarlo como controlador */
.accordion-toggle {
display: none;
}
/* Imagen para el acordeón */
.accordion-label img {
width: 100%;
cursor: pointer;
border-radius: 10px;
transition: transform 0.3s ease;
}
/* Efecto de zoom al hacer hover sobre la imagen */
.accordion-label img:hover {
transform: scale(1.05);
}
/* Texto desplegable, oculto por defecto */
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 15px;
border-top: none;
border-radius: 0 0 10px 10px;
}
/* Mostrar el contenido cuando se selecciona la imagen */
.accordion-toggle:checked + .accordion-label + .accordion-content {
max-height: 100%; /* Ajusta este valor según la altura de tu contenido */
padding: 15px;
font-size: .8rem;
}
@media only screen and (min-width: 600px) {
.accordion-toggle:checked + .accordion-label + .accordion-content {
font-size: 1.5rem;
}
}
</style>
<div class="accordion-container">
<!-- Input invisible para controlar el despliegue -->
<input type="checkbox" id="accordion" class="accordion-toggle">
<!-- Imagen que actúa como botón del acordeón -->
<label for="accordion" class="accordion-label">
<img src="https://www.tiendaiusa.com/media/wysiwyg/home/2025/hotsale/LANDING-Hot-Sale-2025_001.jpg" alt="¿Qué es el Hot Sale?" alt="Imagen del Acordeón">
</label>
<!-- Contenido que se despliega al hacer clic en la imagen -->
<div class="accordion-content">
<p>HOT SALE es la campaña de ventas online mas grande del país que reúne las mejores empresas de venta y servicios online, por décima edición.</p>
</div>
</div>
<style>
/* Estilos generales */
.accordion1-container {
width: 80%;
margin: 20px auto;
text-align: center;
font-family: Arial, sans-serif;
}
/* Ocultar el input para usarlo como controlador */
.accordion1-toggle {
display: none;
}
/* Imagen para el acordeón */
.accordion1-label img {
width: 100%;
cursor: pointer;
border-radius: 10px;
transition: transform 0.3s ease;
}
/* Efecto de zoom al hacer hover sobre la imagen */
.accordion1-label img:hover {
transform: scale(1.05);
}
/* Texto desplegable, oculto por defecto */
.accordion1-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 15px;
border-top: none;
border-radius: 0 0 10px 10px;
}
/* Mostrar el contenido cuando se selecciona la imagen */
.accordion1-toggle:checked + .accordion1-label + .accordion1-content {
max-height: 100%; /* Ajusta este valor según la altura de tu contenido */
padding: 15px;
font-size: .8rem;
}
@media only screen and (min-width: 600px) {
.accordion1-toggle:checked + .accordion1-label + .accordion1-content {
font-size: 1.5rem;
}
}
</style>
<div class="accordion1-container">
<!-- Input invisible para controlar el despliegue -->
<input type="checkbox" id="accordion1" class="accordion1-toggle">
<!-- Imagen que actúa como botón del acordeón -->
<label for="accordion1" class="accordion1-label">
<img src="https://www.tiendaiusa.com/media/wysiwyg/home/2025/hotsale/LANDING-Hot-Sale-2025_002.jpg" alt="¿Cuándo es el Hot Sale?" alt="Imagen del Acordeón">
</label>
<!-- Contenido que se despliega al hacer clic en la imagen -->
<div class="accordion1-content">
<p>Del 25 de Mayo al 2 de Junio</p>
</div>
</div>
<style>
/* Estilos generales */
.accordion2-container {
width: 80%;
margin: 20px auto;
text-align: center;
font-family: Arial, sans-serif;
}
/* Ocultar el input para usarlo como controlador */
.accordion2-toggle {
display: none;
}
/* Imagen para el acordeón */
.accordion2-label img {
width: 100%;
cursor: pointer;
border-radius: 10px;
transition: transform 0.3s ease;
}
/* Efecto de zoom al hacer hover sobre la imagen */
.accordion2-label img:hover {
transform: scale(1.05);
}
/* Texto desplegable, oculto por defecto */
.accordion2-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 15px;
border-top: none;
border-radius: 0 0 10px 10px;
}
/* Mostrar el contenido cuando se selecciona la imagen */
.accordion2-toggle:checked + .accordion2-label + .accordion2-content {
max-height: 100%; /* Ajusta este valor según la altura de tu contenido */
padding: 15px;
font-size: .8rem;
}
@media only screen and (min-width: 600px) {
.accordion2-toggle:checked + .accordion2-label + .accordion2-content {
font-size: 1.5rem;
}
}
</style>
<div class="accordion2-container">
<!-- Input invisible para controlar el despliegue -->
<input type="checkbox" id="accordion2" class="accordion2-toggle">
<!-- Imagen que actúa como botón del acordeón -->
<label for="accordion2" class="accordion2-label">
<img src="https://www.tiendaiusa.com/media/wysiwyg/home/2025/hotsale/LANDING-Hot-Sale-2025_003.jpg" alt="¿Cuáles serán las ofertas del Hot Sale?" alt="Imagen del Acordeón">
</label>
<!-- Contenido que se despliega al hacer clic en la imagen -->
<div class="accordion2-content">
<p>Hasta 63% de descuento</p>
</div>
</div>
