Вывод изображения новости при наведении на заголовок или изображение в topnews » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

25.03.2015
Без рубрики

Предлагаю вашему вниманию более оригинальный вывод (увеличение) изображения новости в topnews для DLE 9.x
В сравнении с прошлой версией вывод изображений стал более живым и привлекательным.И так:В фаил стилей своего шаблона (styles.css) последней строкой вставляем:

/*Всплывающий скриншот*/
 .thumbnail{
 position: relative;
 z-index: 0;
 }
 .thumbnail:hover{
 background-color: transparent;
 z-index: 50;
 }
 .thumbnail span{
    visibility:hidden;
    border: 3px solid orange;
    bottom:200px; /*с какого уровня изображение будет появляться*/
    left:40%;
    margin-left:-110px;
    opacity:0;
    padding:10px;
    position:absolute;
    z-index:99;

    /*background-image:-webkit-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-moz-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-ms-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:-o-linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));
    background-image:linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.2));*/
    background-color: #eee;

    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;

    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
 }
 .thumbnail span img{
 border-width: 0;
 padding: 2px;
 }
 .thumbnail:hover span{
    bottom:30px; /*до какого уровня изображение будет опускаться*/
    opacity:0.95;
    visibility:visible;
        box-shadow: 0.9em 0.9em 15px #555;/*редактируем тень
        1 сдвиг тени по горизонтали 2 сдвиг по вертикали 3 радиус размытия тени
        4 цвет тени*/

 /*-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);*/

/*раскомментировать при желании появления изображения
посредством увеличения*/
 }
 /*---------------------*/

В комментариях указано главное

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

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

{title}

заменяем на

{title}{title}

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

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

{title}

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

{title}{title}

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

Эту же операцию можно использовать и в shortstory

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

В данном случае доробатывайте свой класс.ДЕМО можно посмотреть на нашем сайте! Наслаждайтесь! (:

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