Передача ОСОБЫХ свойств выбранным детям

Question

В настоящее время я работаю над своим первым сайтом и столкнулся с проблемой при попытке создать две анимации.При наведении курсора элемент перемещает текст над изображением (в данном примере это «Krow Logo»), увеличивает изображение и изменяет его непрозрачность.Отлично, пока.

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

Я хочу сохранить переполнение: скрыто на h2 (логотип Krow), но НЕ на h3, поскольку я хочу, чтобы h3 перемещал ВНЕ родительского ящика.

Любые советы приветствуются!

Я возился с: nth-child, чтобы попытаться изменить переполнение свойства: скрыто для видимого

Я попытался создать элемент прародителя с положением, установленным на относительное.

Я пробовал комбинации + ~> комбинаторов

Ни одна из них не работает.

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1104:first-child {
  font-family: 'Raleway', Arial, sans-serif;
  position: absolute;
  left:20%;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

figure.snip1104 h2 {
  position: absolute;
  left: 40px;
  right: 40px;
  display: inline-block;
  background: #000000;
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  padding: 12px 5px;
  margin: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 400;
}

figure.snip1104:hover h2,
figure.snip1104.hover h2 {
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}

figure.snip1104 h3 {
    opacity:0;
  z-index: 5;
  position: absolute;
  left: 40px;
  right: 40px;
  display: inline-block; 
  padding: 12px 5px;
  margin: 0;
  top: 110px;
  overflow: visible;


}

figure.snip1104:hover h3,
figure.snip1104.hover h3{
    opacity:1;
    background-color:green;
    transform: translateY(200%);
}

HTML

<figure class="snip1104 blue">
    <img class="temp" src="/home/it21366/Desktop/liberty/tshirtblue.jpg" alt="sample33"/>
    <figcaption>
        <h2>Krow <span> Logo</span></h2>
        <h3>tesssst</h3>
    </figcaption>

    <a href="#"></a>
</figure>

Эффект, который я хочу получить, заключается в том, что

tessst

переполняет родительский фрагмент и остается видимым, несмотря на то, что выходит за его границы.Вместо этого h3 исчезает (перемещается в локацию, но скрыто)

Answer 1

Хорошо, я создал пример, чтобы показать, как вы можете решить только проблему, которая у вас возникла (из моего понимания вашего вопроса).По сути, вы создаете контейнер для своих заголовков и своего изображения и управляете заголовками / изображением на основе состояния наведения контейнера.

Я покончил со всем, что не нужно для решения проблемы перемещения ваших элементов вокругпоэтому вам придется применить это к вашему собственному решению таким образом, чтобы это имело смысл (например, поиграть с изменением размера, display: none, что угодно).

Есть также способы вызвать это с помощью JavaScript, но яхотел показать решение только для CSS.

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

https://codepen.io/zenRyoku/pen/oRdYzB?editors=1100

@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway', Arial, sans-serif;
}

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: slategray;
}

.main-heading,
.sub-heading {
  padding: 2rem;
  color: white;
  background: rgba(0,0,0,.6);
  transition: all 300ms;
  text-align: center;
}

.main-heading {
  transform: translateY(200%);
}

.sub-heading {
  opacity: 0;
}

.container:hover .main-heading {
  transform: translateY(0px);
}

.container:hover .sub-heading {
  opacity: 1;
  transform: translateY(-200%);
}

<div class="page">
  <div class="container">
    <h2 class="main-heading">Logo</h2>
    <img src="https://source.unsplash.com/400x300/?japan,sign"/>
    <h3 class="sub-heading">some other text</h3>
  </div>
</div>

Answer 2

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

Если я могу спросить, на что вы нацеливаетесь с этим?

figure.snip1104:hover h2,
figure.snip1104.hover h2