strona:
http://tester.mojito.media.pl/mediasat/wp/
panel jest na widoku i innych ofertach sa gwiazdki po najechaniu obracaja sie i gdy klikne element "więcej
szczegółów" pojawi sie panel taki jak widnieje i zakryje gwiazdki. Problem w tym że nie wiem jak logicznie to rozwiązać. mogłbym na sztywno dodawać id, ale wtedy do każdej gwiazdgi handler... to niezbyt dobry pomysl
Wysyłam jak wygląda przykładowa sekcja.
Kod
<section data-menu="2" id="slide-4" class="slide-4 info" data-_slide4="top:0%;" data-450p="top:-100%;">
<section id="slide-3" class="slide-3" data-_slide3="top:0%;" data-450p="top:-150%;">
<div class="top-bar">
</div>
<!-- <div class="photo text-center">
<img src="<?php echo get_template_directory_uri(); ?>/library/images/photo1.png" alt="Internet w każdym zakątku domu"/>
</div> -->
<div class="row">
<div class="large-12 columns">
<?php the_field('naglowek', 20) ?>
<!-- <h2>Internet <span>wspaniały</span>
<em>Dla ciebie</em>
</h2> -->
<div class="offers row">
<div class="small-4 columns">
<div class="part-1 hover">
<div class="front">
<div class="star">
<span class="amount"><?php the_field('gwiazdka1_predkosc', 20) ?></span>
<span class="speed">Mbit/s</span>
</div>
</div>
<div class="back">
<div class="star">
<span class="more">więcej<br> szczegółów</span>
</div>
</div>
<div class="price">
<strong><?php the_field('gwiazdka1_cena', 20) ?> zł/m-c</strong>
<span>+ router wi-fi</span>
</div>
</div>
</div>
<div class="medium-12 columns panel">W czasie pracy</div>
<div class="small-4 columns">
<div class="part-2 hover">
<div class="front">
<div class="star">
<span class="amount"><?php the_field('gwiazdka2_predkosc', 20) ?></span>
<span class="speed">Mbit/s</span>
</div>
</div>
<div class="back">
<div class="star">
<span class="more">więcej<br> szczegółów</span>
</div>
</div>
<div class="price">
<strong><?php the_field('gwiazdka2_cena', 20) ?> zł/m-c</strong>
<span>+ router wi-fi</span>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="part-3 hover">
<div class="front">
<div class="star">
<span class="amount"><?php the_field('gwiazdka3_predkosc', 20) ?></span>
<span class="speed">Mbit/s</span>
</div>
</div>
<div class="back">
<div class="star">
<span class="more">więcej<br> szczegółów</span>
</div>
</div>
<div class="price">
<strong><?php the_field('gwiazdka3_cena', 20) ?> zł/m-c</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row -->
</section>
<!-- /section inside -->
<section id="slide-3" class="slide-3" data-_slide3="top:0%;" data-450p="top:-150%;">
<div class="top-bar">
</div>
<!-- <div class="photo text-center">
<img src="<?php echo get_template_directory_uri(); ?>/library/images/photo1.png" alt="Internet w każdym zakątku domu"/>
</div> -->
<div class="row">
<div class="large-12 columns">
<?php the_field('naglowek', 20) ?>
<!-- <h2>Internet <span>wspaniały</span>
<em>Dla ciebie</em>
</h2> -->
<div class="offers row">
<div class="small-4 columns">
<div class="part-1 hover">
<div class="front">
<div class="star">
<span class="amount"><?php the_field('gwiazdka1_predkosc', 20) ?></span>
<span class="speed">Mbit/s</span>
</div>
</div>
<div class="back">
<div class="star">
<span class="more">więcej<br> szczegółów</span>
</div>
</div>
<div class="price">
<strong><?php the_field('gwiazdka1_cena', 20) ?> zł/m-c</strong>
<span>+ router wi-fi</span>
</div>
</div>
</div>
<div class="medium-12 columns panel">W czasie pracy</div>
<div class="small-4 columns">
<div class="part-2 hover">
<div class="front">
<div class="star">
<span class="amount"><?php the_field('gwiazdka2_predkosc', 20) ?></span>
<span class="speed">Mbit/s</span>
</div>
</div>
<div class="back">
<div class="star">
<span class="more">więcej<br> szczegółów</span>
</div>
</div>
<div class="price">
<strong><?php the_field('gwiazdka2_cena', 20) ?> zł/m-c</strong>
<span>+ router wi-fi</span>
</div>
</div>
</div>
<div class="small-4 columns">
<div class="part-3 hover">
<div class="front">
<div class="star">
<span class="amount"><?php the_field('gwiazdka3_predkosc', 20) ?></span>
<span class="speed">Mbit/s</span>
</div>
</div>
<div class="back">
<div class="star">
<span class="more">więcej<br> szczegółów</span>
</div>
</div>
<div class="price">
<strong><?php the_field('gwiazdka3_cena', 20) ?> zł/m-c</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .row -->
</section>
<!-- /section inside -->