Отзывчивые миниатюры начальной загрузки с надписью анимации при наведении курсора

Question

После долгих поисков я все еще не нашел то, что искал. Вот что мне нужно:

* 8 отзывчивых эскизов начальной загрузки,2 строки по 4 в каждом ряду (4 столбца сетки).

Я использую это col-xs-6 col-sm-6 col-md-3 чтобы сделать это так.

* При наведении курсора на каждую миниатюру я хочу подпись к миниатюре с текстом.

Я просмотрел весь интернет, и ничто не соответствовало моему сайту. У меня есть пример того, что я хочу здесь: http://sevenx.de/demo/bootstrap/thumbnail-hover-caption.html

Но я не мог понять, как разместить его на моем сайте. Есть идеи?

Заранее спасибо всем!

Answer 1

Немного CSS и jquery, вы можете получить анимацию, которую вы ищете.

Рабочий загрузочный пример

По сути, я как бы взял CSS из ссылки, которую вы разместили, и переключил кое-что здесь и там. Я добавил разметку css3 для облегчения анимации и изменения размера анимации.

CSS:

.thumb{
    height:200px;
    background:#E6E6E6;
    position: relative;
    overflow: hidden;
    display: block;
    padding: 4px;
    line-height: 20px;
    border: 1px solid #ddd;
    webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.thumb .caption{
    padding: 9px;
    opacity:0;
    -moz-opacity: 0.5;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    color: #fff !important;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.second-container{
    margin-top: 20px;
}

Затем, что касается макета начальной загрузки, я добавил два контейнера, в каждом из которых есть строка и строка ширины (col-x-12). Внутри каждого col-x-12 я добавил 4 столбца, которые будут отображаться рядом, пока не достигнут порога планшета. В режиме планшета они будут отображать 2 столбца рядом. И в мобильном телефоне будет отображаться как сложены друг на друга. Имейте в виду, что вы не указали много о дизайне, поэтому вам придется настроить CSS в соответствии с вашим дизайном.

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              Hello world
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              Hello Kitty
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              G'day Mate
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              A jolly good day to you
            </div>
        </div>
    </div>
</div>

<div class="container second-container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
              Bonjour cher ami!
            </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
            Guten tag mein freund!
            </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
            Hola amigo!
            </div>
          <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 thumb">
              <div class="caption">
                <h4>Freaking cool title</h4>
                <p>Description: Add a bunch a text</p>
              </div>
            Hello my friend
            </div>
        </div>
    </div>
</div>

Наконец, для запуска анимации нам нужен простой метод наведения курсора JQuery. При наведении мыши мы нацеливаемся на миниатюру и ищем элемент заголовка. После того, как он выбран, мы просто меняем css 'свойство непрозрачности'. При наведении мы сбрасываем свойство. Чтобы замедлить анимацию, просто измените значение "css3 transition", например: "opacity 1s easy-in-out"

JQuery:

$('.thumb').hover(function(){
    $(this).find('.caption').css('opacity','1');
}, function(){
    $(this).find('.caption').css('opacity','0');
});

Надеюсь, это то, что вы ищете.