SlideUp SlideDown

SlideUp SlideDown

// HTML

<!-- BOOKS BEGIN -->

            <div class="books">

                <div class="header thriller">Триллер на ту же тему</div>

                <div class="books-wrapper">

                    <section class="book" id="paperback">

                        <a href="http://www.amazon.com/Oblik-Russian-Alexander-Vassiliev/dp/0957346298" target="_blank" class="book-link"><img src="img/oblik.jpg" alt=""></a>
                        <div class="book-overlay book-paper"></div>
                        <p class="book-text book-paper">Ради спасения человечества ученые воскресили трех политиков: Адольфа Гитлера, Давида Бен-Гуриона и Усаму бен Ладена. Они живут в одном доме в Лондоне. Проектом руководят русский генерал Вавилов и его верная подруга Рита.
                            <br>(Ссылка на бумажное издание на русском языке.)
                        </p>

                    </section>

                    <section class="book" id="kindle">

                        <a href="http://www.amazon.com/dp/B00K6NG0WS" target="_blank" class="book-link"><img src="img/oblik.jpg" alt=""></a>
                        <div class="book-overlay book-kindle"></div>
                        <p class="book-text book-kindle">Электронное издание романа &ldquo;Облик&rdquo; в формате Kindle на русском языке. Его можно читать на всех компьютерах, таблетках и телефонах с помощью бесплатной программы. Ссылка на программу ниже.</p>

                    </section>

                </div>

                <a href="https://www.amazon.com/gp/digital/fiona/kcp-landing-page?ie=UTF8&ref_=kcp_w8_ln_ar" target="_blank">
                    <div class="header thriller">
                        Скачать Kindle App</div>

                </a>

            </div>

            <!-- BOOKS END -->
            
            
  // SASS
  
  .books
    display: block
    float: left
    height: auto
    margin-left: 20px
    position: relative
    width: 190px
    
.thriller
    margin-bottom: 10px
    padding: 0
    text-align: center
    
.book
    border: 2px solid $darkblue
    display: block
    height: 304px
    margin-bottom: 10px
    max-width: 200px
    position: relative
    width: 190px
    
    a
        position: absolute
        
    .book-overlay
        background-color: $darkblue
        height: 304px
        opacity: .9
        position: absolute
        width: 190px
        
    p
        color: $silver
        font-family: 'Lora', serif
        font-size: 14px
        line-height: 1.5
        margin-top: 0
        padding: 0 2px
        position: absolute
        text-align: center

// Javascript

    $('#paperback').hover(function () {
            $('.book-paper').stop(true, true).slideUp();
        },
        function () {
            $('.book-paper').stop(true, true).slideDown();
        });

    $('#kindle').hover(function () {
            $('.book-kindle').stop(true, true).slideUp();
        },
        function () {
            $('.book-kindle').stop(true, true).slideDown();
        });