Passing SPECIFIC properties to selected children - html

Question

I'm currently working on my first site, and I have encountered a problem when trying to create two animations. The element when hovered, moves the text above the image (in this example "Krow Logo"),zooms at the image, and changes its opacity. Great so far.
The problem is, I want a small text to transition in during this animation as well, element h3. This, does not work in all the ways I've tried. I imaged it was a problem with inheritance so I tried to change the parent's properties specifically to its second child. No luck.
I want to preserve overflow:hidden on h2 (Krow Logo) but NOT on h3, since I want h3 to move OUTSIDE of the parent box.
Any hints are greatly appreciated!
I've fiddled around with :nth-child to try and change property overflow:hidden to visible
I've tried creating a grandparent element with position set to relative.
I've tried combinations of + ~ > combinators
None of them works.
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>
</figure>
The effect I wish to occur is for tessst to overflow the parent snip and stay visible despite moving outside of its borders. Instead, h3 disappears (moves to location, but is hidden)

Answer 1

Alright I created an example to show how you might solve just the issue you were having (from my understanding of your question). Basically you create a container for your headings and your image and you control the headings/image based on the hover state of the container.
I have done away with everything not necessary to solving the problem of moving your elements around so you'll have to apply this to your own solution in a way that makes sense (e.g. play with sizing, display: none, whatever you want).
There are also ways to trigger this with JavaScript but I wanted to show a CSS only solution.
If you run the code snippet you should look at it full screen or else it looks bad because I am using view-port units for the page height. Or checkout the codepen and put the editor on the left or right to get more height for the display.
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

Not sure that I got what you're trying to achieve, but if overflow is hidden in the parent box, then any content you want to overflow outside of it will be hidden as that is the meaning of overflow: hidden.
If I may ask, what are you trying to target with this?
figure.snip1104:hover h2,
figure.snip1104.hover h2