Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Модули Короткая новость в виде кликабельного изображения

Короткая новость в виде кликабельного изображения


     15.12.2012    Модули, Хаки    2460

вопрос
Привет, давно не работал с ДЛЕ, как то "выпал из темы", поэтому возможно мой вопрос будет примитивен, и решение ему давно существует, если же нет, то очень прошу помочь.

Суть вот в чём, нужно на главной в виде короткой новости выводить изображение (можно с заголовком, можно без), т.е изображение должно быть кликабельным с ссылкой на полную новость, где уже в свою очередь будет размещаться всё что угодно. Но ещё при наведении на картинку должна появляться другая, грубо говоря информирующая о том, что картинка не для красоты.

Короткая новость в виде кликабельного изображения

Короткая новость в виде кликабельного изображения


Подскажите кто чем может. Такое нынче очень актуально, думаю будет полезно не только мне.

Ответил: BR0kEN


Самый простой вариант:
<!DOCTYPE html>
<html lang="ru">
<head>
    <link rel="stylesheet" href="demo.css" />
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
    <div class="articles">
        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку Предлагаю нажать на картинку Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>

        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>

        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>
        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>

        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>

        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>
    </div>
</body>
</html>

body {
    height:100%;
    width:100%;
    background:#eee;
}
body, figure {
    margin:0;
    padding:0;    
}
.articles {
    padding:25px;
    width:850px;
    margin:0 auto;
    background:#fff;
        border:1px solid #ccc;
        margin-top:25px;
}
.articles:after,
.articles:before {
    content:"";
    display:table;
}
.articles:after {
    clear:both;
}
figure {
    position:relative;
    float:left;
    width:280px;
    height:200px;
    overflow:hidden;
    margin:0 2px 2px 0;
    background:#ccc;
}
figure img {
    min-width:100%;
    min-height:100%;
}
figure:hover > figcaption {
    display:block;
}
figcaption {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(81,133,185,.85);
    line-height:200px;
}
figcaption a {
    color:#fff;
    width:100%;
    height:100%;
    display:block;
    font-size:14px;
    font-weight:bold;
    font-family:Arial;
    text-align:center;
    vertical-align:middle;
}
figcaption a:hover {
    text-decoration:none;
}

Демо: http://jsfiddle.net/BR0kEN/AqXtN/

Комментарии пользователей (3)

Sander
1126

1637 | 1204

Sander - 16 декабря 2012 03:07 - Эксперт

А чтобы обрезать изображения в единый формат, предлагаю свой модуль Miniposter
Вот пример того, что можно в итоге получить... - почти все изображения выводятся через модуль.

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

diprime
7 | 6

diprime - 17 декабря 2012 21:22 - Юзер

Спасибо, попробую, хотя изначально планировал руками делать нужный размер.

diprime
7 | 6

diprime - 17 декабря 2012 21:21 - Юзер

Огромное СПАСИБО! Как раз самое то, всё посредством html и css без ковыряния движка) Всё отлично работает, осталось только заточить под себя.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы