CSS-градиент сверху тега изображения (HTML)

0

Я пытаюсь снять этот эффект:

http://imgur.com/aEKKuM7

Серый - это место для изображений.

Моя цель заключалась в использовании градиента CSS (от белого до прозрачного) и отображения изображения ниже градиента. Образцом-заполнителем в конечном итоге станут сообщения, в которых будут отображаться изображения для темы wordpress. Вот почему я не использовал фоновое изображение.

Моя кодированная версия выглядит так: http://imgur.com/QWmdJSa

Я не уверен, как заставить его опуститься ниже градиента. Я пробовал использовать Z-индекс, но скрывал изображение за всем.

Вот как выглядит мой код:

HTML:

<article class="inlineContainer newsBox"><!-- Gradient is on newsBox class -->
    <div class="details">
        <div class="image">
            <strong class="tag">Games</strong>
            <img src="images/newsimg.jpg" alt="preview" /> <!-- Image I want Behind Gradient-->
        </div>
        </div>              
        <div class="post borderBox">
            <h3><a href="">We will tell you everything about Aatrox New Champion</a></h3>
            <p>Aliquam erat volutpat. Morbi a augue et velit congue faucibus. Quisque suscipit porta iaculis. Vivamus et elementum orci. Proin euismod ante nisi, vel consectetur massa dapibus id. Donec condimentum... Ut quis nisl at erat ultricies pellentesque at ut justo. </p>
            <div class="bottom">
                <div class="metaDetails">
                    <a class="author borderBox" href="">Doublelift</a>
                    <a class="comments borderBox" href="">1289 Comments</a>
                </div>
                <a class="readMore" href="">Read More</a>
            </div>
        </div>
</article>

CSS:

.newsBox {
    border: 1px solid #bdccd3;
    border-radius: 5px;
    box-shadow: 0px 2px 3px 0px rgba(207, 218, 220, 1);
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.image {
    height: 100%;
    width: 160px;
    margin: 0 auto;
    position: relative;
    background-color: grey;
}
.image img {
    height: 261px;
    width: 160px;
    display: block;
}
  • 1
    Добро пожаловать в переполнение стека! Вы получите ответы быстрее, если создадите рабочую демонстрацию на jsfiddle.net, поэтому нам не нужно отлаживать код в наших головах!
  • 1
    Спасибо! Прежде чем я отправил сообщение, я пытался найти этот сайт. Но я не смог найти его и не был уверен, что это только для jquery / js. Я пойду положу один там сейчас.
Показать ещё 4 комментария
Теги:

2 ответа

0
Лучший ответ

Кто-то оставил ответ здесь, а затем с jsfiddle, а затем удалил его. Не знаю, почему, но это послало меня в правильном направлении.

Вот что я сделал:

  1. Изменен фон содержимого белого цвета градиента.
  2. Добавлен новый контейнер вокруг изображения. Поместите градиент на этот контейнер.
  3. Изменен z-index изображения на -1.

Это создает градиент над изображением, и он исчезает до белого цвета содержимого bg.

Он работает отлично. Спасибо, кто отправил это jsfiddle!

Поделиться
1

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

Используемый мной CSS

    .gradient-effect{
        position: relative;
        display: block;
    }
    .gradient-effect::before{
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        right: 0;
        height: 30%;
        background: linear-gradient(to bottom,rgba(255,255,255,0),#CCC) repeat left top;
    }

И HTML это было так

<div class="gradient-effect">
    <img class="img-responsive" src="images/my-image.jpg" alt="">    
</div>

Я надеюсь, это поможет вам.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню