Измените непрозрачность изображения и добавьте фоновую ссылку при наведении на него курсора - PullRequest
Новая
       5

Измените непрозрачность изображения и добавьте фоновую ссылку при наведении на него курсора

0 голосов
/ 26 февраля 2012

У меня есть стили рамки для изображения: 

.frame {
    background:#efefef;
    border:1px solid #f6f6f6;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); /* @todo Old Browsers Fix */
    margin-bottom:15px;
    padding:4px;
}

в одном месте проекта, над которым я работаю, у меня есть следующий HTML-код: 

<a href="#" class="preview">
    <img class="frame" src="http://placehold.it/288x159" alt="" />
</a>

По сути, я хочуизмените непрозрачность файла при наведении курсора и добавьте фон (значок предварительного просмотра) к ссылке.У меня есть следующий код: 

.preview img.frame {
    margin:0;
    position:relative;
}
.preview:hover {
    background:url('../img/icon_zoom.png') center center no-repeat;
    display:inline-block;
    z-index:40;
}
.preview img { /* @todo Add different browsers rules */
    opacity: 1;
    /*moz-transition-property:opacity;
    -moz-transition-timing-function:ease-out;
    -moz-transition-duration:500ms;*/
    -moz-transition:opacity 1s ease-in-out;
}
.preview:hover img {
    opacity:.5;
    -moz-transition:opacity 1s ease-in-out;
    /*-moz-transition-property:opacity;
    -moz-transition-duration:500ms;
    -moz-transition-timing-function:ease-out;*/
    display:block;
    position:relative;
    z-index:-1;
}

Однако я столкнулся с несколькими проблемами: - как я могу показать фон только для тела изображения (в настоящее время он также отображается на границе)?- почему непрозрачность не изменяется в Chrome?

jsFiddle добавлено.Как видите, он работает в FF, но не в Chrome.

1 Ответ

0 голосов
/ 26 февраля 2012

Проблема в том, что вы меняете display на inline-block. Извлеките его, он должен иметь такую ​​же функциональность и работать нормально.

Изменение пары вещей, кажется, работает так, как вы хотели. http://jsfiddle.net/minitech/v2vtw/2/

...