Question

Как прописать так, чтобы убрать название на фотогалереи, но оставить при наведении мышки в информере, на главной странице сайта

Comments

Покажите на скриншотах, что вам надо, т.к информер и фотогалерея это разные вещи.

---

Есть информер на главной странице сайта, где выводится последние загруженные работы в количестве 10 штук, на страницу фотоальбом не надо заходить

Вот код информера

<div class="col5 work mix category-$CID$">
 <div class="boxx">
 <img src="$FULL_PHOTO_DIRECT_URL$" alt="text">
 <span><h5>$PHOTO_NAME$</h5>
 <a class="ulightbox" href="$FULL_PHOTO_DIRECT_URL$" data-fancybox-group="ulightboxgroup"><i class="fa fa-search"></i></a><a href="$PHOTO_URL$"><i class="fa fa-link"></i></a>
 </span>
 </div>
 </div>

---

Алексей Игнатьев,

И что вы хотите убрать из информера? детальней опишите...

---

при открытии страницы сразу видно название фотографий, как сделать чтобы их не было видно, но было видно при наведении на них мышкой

Answer 1

В ксс здесь добавьте display:none; пример ниже

.work div.boxx span h5 {
color: #FFFFFF;
display: none;
font-weight: 700;
letter-spacing: 1px;
margin: 15px 0px;
}

а здесь display:block; пример ниже

.work div.boxx:hover span h5 {
color: #F58220;
display: block;
}

Comments

Какой номер строки, сюда после колор добавить display: none;

.work div.boxx span h5 {
color: #FFFFFF;
display: none;
font-weight: 700;
letter-spacing: 1px;
margin: 15px 0px;
}

также и

а здесь display:block; пример ниже

.work div.boxx:hover span h5 {
color: #F58220;
display: block;
}

---

Алексей Игнатьев,

770 display:none;
776 display:block;

---

Спасибо, все работает

Answer 2

Если я правильно понял, то:

   .pic {
    display: inline-block;
    position: relative;
   }
   .pic:hover::after {
    content: attr(data-title);
    position: absolute;
    left: 0;
right: 0;
bottom: 5px; /* Положение подсказки */
    z-index: 1; /* Поверх других элементов */
    background: #000; /* Цвет фона при наведении */
    color: #fff; /* Цвет текста */
    text-align: center; /* Текст по центру */
    font-size: 11px; /* Размер текста */
   }

  <div class="pic" data-title="Надпись, выводимая при наведении"><img src="$FULL_PHOTO_DIRECT_URL$" alt="text"></div>