Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

Анимация при наведении

Тема в разделе "Ищу плагин, функционал", создана пользователем tuxfighter, 20 сен 2016.

  1. tuxfighter

    tuxfighter Местный

    Сообщения:
    666
    Симпатии:
    105
    Баллы:
    43
    есть вот такой сайт справа внизу 2 блок "Блог" и "Клуб"
    при наведении курсора статистическая картинка сменяется зацикленным видео (или может быть гифка).
    Как это сделано? в идеале, если кто знает такой плагин....
    пока что примерно повторил это на CSS, но стойкое ощущение, что не так делаю.....
     
  2. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
  3. tuxfighter

    tuxfighter Местный

    Сообщения:
    666
    Симпатии:
    105
    Баллы:
    43
    спасибо, прочитал про тег, как вставляется видео понял.......
    ну и стало понятнее что именно искать в плагинах -))
     
  4. tuxfighter

    tuxfighter Местный

    Сообщения:
    666
    Симпатии:
    105
    Баллы:
    43
    а да, в итоге сделал так, если кому интересно:
    html
    HTML:
    <a class="videofront" href="/novosti/">
    <video src="/wordpress/wp-content/uploads/2016/09/blog_VP8.webm" poster="/wordpress/wp-content/uploads/2016/09/news-go.jpg" loop="on" autoplay="on" height="197" width="350"/></a>
    
    css
    Код:
    .videofront {
    
    display:block; /* Устанавливаем */
    
    width:350px; /* Ширина и высота картинки */
    
    height:197px;
    
    background:url(/wordpress/wp-content/uploads/2016/09/news-go.jpg) no-repeat; /* Заливаем блок статичной картинкой */
    
    }
    
    
    /* Как видно, начальное (статическое) изображение задано как фон блока с шириной и высотой этого изображения. */
    
    a.videofront video {
    
    visibility:hidden; /* Aнимация не была видна в ситуации, когда мышь не наведена */
    
    }
    
    a.videofront:hover {
    
    background:none; /* Фон (статичное изображение) не было видно при наведении мыши */
    
    }
    
    a.videofront:hover video {
    
    visibility:visible; /* При наведении анимация показывается */
    
    border:0; /* без обрамления ;) */
    
    }