Я размещаю три изображения из Google в своей демонстрации кода.

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

Они работают нормально, но из-за цвета последнего он выглядит намного темнее при наведении курсора, чем два других.

Мне было интересно, есть ли способ выбрать последнее изображение с помощью n-го дочернего (или аналогичного) селектора, чтобы я мог стилизовать его с меньшей непрозрачностью, независимо от двух других, которые я хочу сохранить.

Вот ссылка на кодовый код - http://codepen.io/skoster7/pen/ozgjmP?editors= 1100

Как я уже сказал, я хотел бы, чтобы у последнего изображения была меньшая непрозрачность, чем у двух других, в идеале с использованием селектора nth-child или чего-то подобного.

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

.flexcontainer {
  display: flex;
}
.spr,
.wint,
.aut {
  width: 300px;
  height: 200px;
  margin: 5px;
}
.overlay {
  transition: .5s;
  position: absolute;
  margin: 12.5px 0 0 5px;
  top: 0;
  width: 300px;
  height: 200px;
  background: black;
  opacity: 0;
}
.overlay:hover {
  transition-delay: .2s;
  transition-duration: 1s;
  opacity: .6;
}
.overlay p {
  font-size: 2em;
  color: white;
  font-family: verdana;
  text-align: center;
}
.photocontainer:last-child .overlay:hover {
  rgba(20, 5, 5, 0.35);
  text-
}
<div class="flexcontainer">


  <div class="photocontainer">
    <img class="spr" src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg">
    <div class="overlay">
      <p>Spring is here</p>
    </div>
  </div>


  <div class="photocontainer">
    <img class="wint" src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/winter-bucket-list-2015-igloos_h.jpg?itok=RbGFkDiq">
    <div class="overlay">
      <p>Winter is here</p>
    </div>
  </div>


  <div class="photocontainer">
    <img class="aut" src="http://www.idealmagazine.co.uk/wp-content/uploads/2013/10/Autumn-10.jpg">
    <div class="overlay">
      <p>Autumn is here</p>
    </div>
  </div>

</div>
2
skoster7 4 Сен 2016 в 18:20

3 ответа

Лучший ответ

Вот как вы можете настроить таргетинг на каждый из них, используя nth-child, мы нацелены на родительский элемент, то есть .photocontainer, поскольку они имеют одинаковый class name на всех трех изображениях.

.photocontainer:nth-child(1) > .overlay:hover {
  opacity: 0.4;
}
.photocontainer:nth-child(2) > .overlay:hover {
  opacity: 0.6;
}
.photocontainer:nth-child(3) >  .overlay:hover {
  opacity: 1;
}
.flexcontainer {
  display: flex; 
}

.spr,
.wint,
.aut {
  width: 300px; 
  height: 200px;
  margin: 5px; 
}

.overlay {
  transition: .5s; 
  position: absolute;
  margin: 12.5px 0 0 5px;
  top: 0;  
  width: 300px;
  height: 200px;
  background: black; 
  opacity: 0;   
  
}

.overlay:hover {
  transition-delay: .2s;
  transition-duration: 1s; 
}

.overlay p {
  font-size: 2em; 
  color: white;
  font-family: verdana; 
  text-align: center;  
}

.photocontainer:nth-child(1) > .overlay:hover {
  opacity: 0.4;
}
.photocontainer:nth-child(2) > .overlay:hover {
  opacity: 0.6;
}
.photocontainer:nth-child(3) >  .overlay:hover {
  opacity: 1;
}
    <div class="flexcontainer">


    <div class="photocontainer"> <img class="spr" src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg">
      <div class="overlay"><p>Spring is here</p>
      </div>
      </div>


    <div class="photocontainer">  <img class="wint" src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/winter-bucket-list-2015-igloos_h.jpg?itok=RbGFkDiq">
      <div class="overlay"> <p>Winter is here</p>
      </div>
      </div>


      <div class="photocontainer"><img class="aut" src="http://www.idealmagazine.co.uk/wp-content/uploads/2013/10/Autumn-10.jpg">
        <div class="overlay"><p>Autumn is here</p>
     </div>
      </div>

    </div>
2
frnt 4 Сен 2016 в 15:38

ОБНОВЛЕНО

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

Рабочий пример на CODEPEN

HTML:

<div class="flexcontainer">


  <div class="photocontainer"> <img class="spr" src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg">
    <div class="overlay"></div>
    <p>Spring is here</p>
  </div>


  <div class="photocontainer"> <img class="wint" src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/winter-bucket-list-2015-igloos_h.jpg?itok=RbGFkDiq">
    <div class="overlay"></div>
    <p>Winter is here</p>

  </div>


  <div class="photocontainer"><img class="aut" src="http://www.idealmagazine.co.uk/wp-content/uploads/2013/10/Autumn-10.jpg">
    <div class="overlay"></div>
    <p>Autumn is here</p>
  </div>

</div>

CSS:

.flexcontainer {
  display: flex;
}

.photocontainer,
.spr,
.wint,
.aut {
  width: 300px;
  height: 200px;
  margin: 5px;
  position: relative;
}

.overlay {
  transition: .5s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 200px;
  background: black;
  opacity: 0;
  margin: 5px;
}

.photocontainer p {
  position: absolute;
  font-size: 2em;
  color: white;
  font-family: verdana;
  text-align: center;
  top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 5px;
  z-index: 1;
  transition: .5s;
  opacity: 0;
}

.photocontainer:hover .overlay {
  transition-delay: .2s;
  transition-duration: 1s;
  opacity: 0.6;
}

.photocontainer:hover p {
  transition-delay: .2s;
  transition-duration: 1s;
  opacity: 1;
}

.photocontainer:hover:last-child .overlay {
  opacity: 0.3;
}

Старый :

.photocontainer:last-child .overlay:hover {
  opacity: 0.4;
}

Надеюсь, теперь обе ваши проблемы решены.

Наслаждаться :)

1
Jyoti Pathania 4 Сен 2016 в 18:23

Вот как это сделать. Значение opacity приведено только для примера.

.photocontainer:last-child .overlay:hover {
  opacity: .3;
}

пересмотренный кодекс

Псевдокласс :last-child нацелен на последнего брата и сестру тот же родитель.

В вашем HTML третье изображение содержится в последнем div .photocontainer.

Как только фокус переместится на третий контейнер, вы можете использовать селектор потомков для нацеливания на изображение.

Также имейте в виду, что свойство opacity применяется не только к целевому элементу, но и ко всем потомкам элемента.

Поэтому, когда вы уменьшите непрозрачность .overlay, текст внутри также исчезнет.

Решение - использовать метод цвета rgba(). a обозначает альфа-канал и позволяет применять прозрачность только к цвету.

Добавьте это к своему коду:

.photocontainer:last-child .overlay:hover {
    background-color: rgba(0, 0, 0, 0.5); 
}

пересмотренный код, иллюстрирующий оба метода

(Если вы применяете opacity к изображению, это еще одна игра с мячом. Вы можете найти множество сообщений на эту тему на этом сайте.)

Ссылки:

1
Michael Benjamin 5 Сен 2016 в 17:51