Вопрос Как сделать всплывающее описание для вступительных картинок в Joomla 3

Здравствуйте ! Я делаю сайт онлайн фильмов на Joomla 3. Как сделать всплывающее описание при наведении для вступительных картинок в joomla 3, наподобие как на сайте https://www.ivi.ru/ ?Посмотрите картинку, которую я прикрепил. Заранее большое спасибо !

 

Спасибо за ответ ! Подскажите пожалуйста, как это реализовать, как подключить к каждому новому материалу описание, которое в будущем будет всплывать при наведении на вступительное изображение курсором с помощью javascript или css ?

 

Как я понял, нужно создать материал, в материале выключить редактор и поместить верстку вот такого типа :

Код (html):

1. <div class="popup-wrapper">
2.     <div class="properties">
3.         <span class="feature" title="Видео доступно в HD-качестве">HD</span>
4.         <span class="feature" content="0+" itemprop="contentRating">0+</span>
5.         <span itemprop="datePublished" content="2013">2013</span>
6.         <span itemprop="productionCountry" content="CA"> Канада </span>
7.     </div>
8.        <div class="story-text">
9.             <p>Киллер убивает лучшего друга, а затем становится наставником сына погибшего...</p>
10.         </div>
11. </div>

Потом обернуть вот этот код, который отвечает за вывод изображений в div "popup-wrapper" :

Код (PHP):

1. <?php defined('_JEXEC') or die; ?>
2. <ul class="latestnews<?php echo $moduleclass_sfx; ?>">
3. <?php foreach ($list as $item) : ?>
4. <li class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
5.    <?php $images = json_decode($item->images); ?>
6.    <img src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/>
7.    <a href="<?php echo $item->link; ?>" itemprop="url">
8.          <span itemprop="name">
9.             <?php echo $item->title; ?>
10.          </span>
11.       </a>
12. </li>
13. <?php endforeach; ?>
14. </ul>

Далее сделать div "popup-wrapper" невидимым и выводить только при hover ?

 

Спасибо большое !

 

@shurikkan
Спасибо за ответ. Да, у меня переопределён файл html\mod_articles_latest\default.php (в этом файле у меня находится код, который выводит картинки)
Обверну в блок div (блок с описанием) вывод картинок, при этом сделаю чтобы блок с описанием выводился при наведении на картинку. Если будут вопросы, напишу сюда. Ещё раз спасибо !

 

Здравствуйте ! Добавил скрипт в материал через плагин sourcerer, сделал описание при наведение выходит полное описание, скрипт работает отлично, так, как мне надо. Вопрос, как сделать, чтобы описание выходило при наведении на вступительное изображение. Файл отвечающий за вывод изображений и не только html\mod_articles_latest\default.php переопределил. Как добавить скрипт к выводу изображений ? Заранее большое спасибо !

Код (PHP):

1. <?php defined('_JEXEC') or die; ?>
2. <ul class="latestnews<?php echo $moduleclass_sfx; ?>">
3. <?php foreach ($list as $item) : ?>
4. <li class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
5.    <?php $images = json_decode($item->images); ?>
6.    <img src="<?php echo htmlspecialchars($images->image_intro) ; ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt);?>"/>
7.    <a href="<?php echo $item->link; ?>" itemprop="url">
8.          <span itemprop="name">
9.             <?php echo $item->title; ?>
10.          </span>
11.       </a>
12. </li>
13. <?php endforeach; ?>
14. </ul>

--- добавлено: 01.09.2017 ---

Сам скрипт

Код (javascript):

1. $(".tiptext").mouseover(function() {
2.     $(this).children(".description").show();
3. }).mouseout(function() {
4.     $(this).children(".description").hide();
5. });

Код (html):

1. <div class="tiptext">Text
2. <div class="description"> Here is the big fat description box</div>
3. </div>

Код (css):

1. .tiptext {
2.     background:#ccc;
3.     border: 1px #333 solid;
4.     padding:5px;
5.     width:100px;
6. }
7. .description {
8.     display:none;
9.     position: absolute;
10.     border: 1px solid #000;
11.     width: 479px;
12.     height: 175px;
13.     padding: 10px;
14.     background: #000;
15.     color: #fff;
16.     top: 42px;
17.     left: 15px;
18. }

 

Но как подключить скрипт к картинке я так и не понял. Было бы хорошо, если помогли. Заранее спасибо !

--- добавлено: 01.09.2017 ---

Или этот вопрос относится к платным ?

--- добавлено: 01.09.2017 ---

Мне нужно, чтобы описание выходило бы при наведении на картинку

 

Хорошо ! Спасибо за ответ !