Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Эффект при наведении курсора мыши на фото

Эффект при наведении курсора мыши на фото


     02.04.2014    Стили (CSS)    2127

вопрос
Добрый день!
Подскажите как привязать данные эффект к картинке на DLE 10.1
Фото на страничку загружены через стандартный загрузчик DLE
Вот адрес эффектов, нужен 5-й
ССылка на эффект

Здесь описание и исходники.ссылка

Вывод картинки через
{custom category="2" template="last-updates" aviable="global" from="0" limit="4" cache="no"}

template="last-updates"
<div class="last-updates-item">
    <div class="last-updates-image">
        [full-link]<img src="{image-1}" alt="{title}" />[/full-link]
    </div>

</div>

и через shortstory
<div class="last-updates-item shortstory">
    <div class="last-updates-image">
        [full-link]<img src="{image-1}" alt="{title}" />[/full-link]
    </div>
    <div class="last-updates-item-title">
        [full-link]{title}[/full-link]
    </div>
    <div class="last-updates-item-content">
        {short-story limit="150"}
    </div>
    <div class="last-updates-more">
         <a href="{full-link}">подробнее</a>
    </div>
</div>


Заранее спасибо!

Ответил: fh79655l123


Где исходники там данный пример... зачем спрашивать как сделать??
Размеры подстроишь сам под свой сайт

{custom category="2" template="shortstory" aviable="global" from="0" limit="4" cache="no"}


shortstory - стандартный шаблон. можно создать новый и поставить заместо его

Вставить в шаблон shortstory.tpl
 <div class="view view-first">
                   <img src="{image-1}" alt="{title}" width="300" />
                    <div class="mask">
                        <h2>{title}</h2>
                        <p>Краткое описание</p>
                        <a href="{full-link}" class="info" >Подробнее</a>
                    </div>
                </div>


Вставить в CSS default.css (Может быто другое название в папки ВАШАТЕМА/css/)

.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}    
.view-first img {
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7);
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first:hover img {
    transform: scale(1.1);
}
.view-first:hover .mask {
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}
    </style>

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

yziker
30 | 3

yziker - 3 апреля 2014 00:57 - Юзер

Я просто еще не очень разбираюсь в сss и шаблонах, поэтому большое количество кода меня пугает )
Все получилось, спасибо!

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

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