Изображение в topnews » Techno-Co

18.08.2013
Без рубрики
  • Новость
  • Скрины
  • Рекамендуемое

Опубликовано примерно   4 месяца и неделю назад
 Покзывает изображение и новости при наведении на заголовок в Top newsВсё очень и очень просто!CSS и только!

В фаил стилей своего шаблона (styles.css) последней строкой вставляем:

/*Всплывающее изображение*/
 .thumbnail{
 position: relative;
 z-index: 0;
 }
 .thumbnail:hover{
 background-color: transparent;
 z-index: 50;
 }
 .thumbnail span{ /*CSS for enlarged image*/
 position: absolute;
 background-color: #3d3d3d;
 padding: 5px;
 left: -1000px;
 border: 1px solid white;
 visibility: hidden;
 color: Yellow;
 text-decoration: none;
 border-radius: 4px 4px 4px 4px;
 -moz-border-radius: 4px 4px 4px 4px;
 -webkit-border-radius: 4px 4px 4px 4px;
 }
 .thumbnail span img{ /*CSS for enlarged image*/
 border-width: 0;
 padding: 2px;
 }
 .thumbnail:hover span{ /*CSS for enlarged image on hover*/
 visibility: visible;
 top: 0;
 left: 60px; /*position where enlarged image should offset horizontally */
 }
 /*---------------------*/

В файле шаблона topnews.tpl:

(если шаблон показывает только заголовок, без изображения) находим

{title}

заменяем на

{title}{title}

width=»250px» меняем по своему усмотрению.

(если шаблон показывает миниатюру изображения новости)находим

{title}

заменить на (примерно должно получиться такое):

{title}{title}

соответственно width=»350px» устанавливаем свой параметр.

PS Внимание! Если Ваш img изначально в шаблоне взят в div class, то возможен конфликт классов.

В данном случае доробатывайте свой класс.

Адаптировал: ToNik

   Красивый вид голосования для DLE

   Показ сложности пароля

   Красивый вид attachment для DLE 9.7-9.8

   Адаптация шаблонов с DLE 9.7 до DLE 9.8

   Адаптация шаблонов с Dle 9.5 под Dle 9.6


Своё Спасибо, еще не выражали.


Обсуждение новости:

  • Комментарии
  • Вконтакте
  • FaceBook

  • Smint: «липучее» меню с плавной прокруткой на jQuery Подробно
  • 3D Parallax jQuery Plugin with Editor Подробно
  • CSS Modal: Lightbox на CSS (с небольшим количеством JavaScript-кода) Подробно
  • Скрипт поисковой системы search-x-cell Подробно
  • Выводим твиты на любом сайте с помощью jQuery Подробно
  • elevateZoom: встроенный в галерею jquery-плагин для масштабирования изображений Подробно
  • PHP видео конвертер Подробно
  • Создание эффекта скругления углов изображения при помощи JavaScript Подробно
  • Создание эффектов модальных окон для сайта Подробно
  • 404! Страница Windows 8 Style Подробно