CSS сетка и наложение изображения - PullRequest
Новая
       9

CSS сетка и наложение изображения

0 голосов
/ 19 февраля 2019

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

Эффект парения отображается над сеткой.Я хочу, чтобы наведение произошло над соответствующим изображением.Я просмотрел сотни сообщений, но почему-то не вижу проблемы.Я пытался решить эту проблему, используя только CSS, и хотел бы решить эту проблему, используя только CSS, но я открыт для предложений.

Может кто-нибудь помочь мне с тем, что я делаю неправильно?Любая помощь, которую вы можете оказать, будет очень цениться.Спасибо за вашу помощь!

Я предоставил ссылку на свой код: https://codepen.io/sktorres/pen/NoBZQV

Ниже приведен код CSS, который я кодировал вместе с моей основной оболочкой, которая содержит сетку:

    .wrapper{
      display:grid;
      grid-template-columns: auto;
      grid-template-rows: auto 30% 40% auto auto;
      grid-template-areas:
      "hd"
      "hero  "
      "casestudies"
      "contact"
      "ft";
    }
    /* case studies */
    .casestudies {
      align-items: stretch;
      display:grid;
      grid-area: casestudies;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto;
      justify-self: stretch;
      margin:0;
    }
    .work{
    	background-color:#F4FAFF;
      grid-column: span 3;
    	height: auto;
      padding: 1rem;
      margin:0;
    }
    .work h2{
    	color: #333745;
    	font-size: 3rem;
    	font-weight:300;
    	text-align: center;
    }

    .content .content-overlay {
      background: rgba(0,0,0,0.7);
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      opacity: 0;
      margin:0;
      padding:0;
      -webkit-transition: all 0.4s ease-in-out 0s;
      -moz-transition: all 0.4s ease-in-out 0s;
      transition: all 0.4s ease-in-out 0s;
    }

    .content:hover .content-overlay{
      opacity: 1;
    }

    .content-image{
      width: 100%;
      height:100%;
    }
    .content-details {
      position: absolute;
      text-align: center;
      padding: 0 1rem;
      width: 100%;
      top: 40%;
      left: 50%;
      opacity: 0;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }

    .content:hover .content-details{
      top: 50%;
      left: 50%;
      opacity: 1;
    }

    .content-details h2{
      color: #F4FAFF;
      font-weight: 100;
      margin-bottom: 0.5rem;
    }

    .content-details p{
      color: #F4FAFF;
      font-size: 1rem;
    }

    .fadeIn-bottom{
      top: 80%;
    }

And this is the html to call up my CSS:
    <div id="wrapper">					
    <!-- Work -->
    <div class="work">
    <h2>Case Studies</h2>
    </div>
    <section id="casestudies" class="casestudies">
    <article class="content">
    <a href="autoshow.html">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
    <div class="content-details fadeIn-bottom">
    <h2 class="content-title">kbb.com</h2>
    <p class="content-text">New Car Tablet Experience</p>
    </div>
    </a>
    </article>

    <article class="content">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
    <div class="content-details fadeIn-bottom">
    <h2 class"content-title">National Association of Realtors</h2>
    <p class="content-text">Onboarding Project</p>
    </div>
    </article>

    <article class="content">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
    <div class="content-details fadeIn-bottom">
    <h2 class"content-title">GWR Smart Home</h2>
    <p class="content-text">Mobile App</p>
    </div>
    </article>

    <article class="content">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
    <div class="content-details fadeIn-bottom">
    <h2 class"content-title">kbb.com</h2>
    <p class="content-text">Trade In Value</p>
    </div>
    </article>

    <article class="content">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
     <div class="content-details fadeIn-bottom">
    <h2 class"content-title">kbb.com</h2>
    <p class="content-text">Website Redesign</p>
    </div>
    </article>

    <article class="content">
    <div class="content-overlay"></div>
    <img class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362" alt="" />
    <div class="content-details fadeIn-bottom">
    <h2 class"content-title">TCP Lighting</h2>
    <p class="content-text">Smart Lighting Mobile App</p>
    </div>
    </article>
    </section>

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Вы пытаетесь сделать анимацию размером всего окна просмотра.Это было немного сложно, но если вы осмотрите консоль, вы увидите, что анимация пытается подойти как весь экран.Если вы измените положение класса содержимого на относительное, анимация будет отображаться только в том элементе, который вы хотите.

0 голосов
/ 19 февраля 2019

Единственное, что вам нужно сделать, это установить положение контейнера для упаковки относительно.Не имеет ничего общего с сеткой, это просто позиционированный элемент относительно тела и вычисляет ширину, высоту и положение тела вместо его родителя.

Вы рисуете фон для 

.content .content-overlay

Установите родительский контейнер в относительный, и он работает. 

.content {
  position: relative;
}
...