Hiding Hover Bar?

[MBM]

I have content sitting in a container and a hover bar positioned inside the footer so it’s effectively hidden. When an image is hovered over the bar scrolls out from the footer over the bottom of the image. This is done using the figcaption function. The problem is if I adjust the content, for example if I have links to three news items instead of two the hover bar is no longer hidden and drops below the footer. If I have only two links it’s hidden.

I cannot post a pen as there are three stylesheets and javascript for the content. It’s live here. I’ve played around with z-index and overflows but it doesn’t help. I could, in the worst case scenario have a limit of 3 news items then position the bar inside the footer but would rather avoid this if possible. Live here (1920 x 1080) :

http://soccer-europe.com/worldcup/index2.html

This is the structure of the html :

<a href="http://soccer-europe.com/RSS/News.xml">
<img src="../images/RSS.png" class="rss" alt="soccer-europe.com rss feed" width="32" height="32" /></a>
<a href="Reports/Round38.html"><b>13 June 2014 : </b>World Cup 2014 Day One</a><br style="clear:left;"/>
<a href="http://soccer-europe.com/RSS/News.xml">
<img src="../images/RSS.png" class="rss" alt="soccer-europe.com rss feed" width="32" height="32" /></a>
<a href="Reports/Round38.html"><b>13 June 2014 : </b>World Cup 2014 Day One</a>
<br style="clear:left;"/>
<a href="http://soccer-europe.com/RSS/News.xml">
<img src="../images/RSS.png" class="rss" alt="soccer-europe.com rss feed" width="32" height="32" /></a>
<a href="Reports/Round38.html"><b>13 June 2014 : </b>World Cup 2014 Day One</a>
<br style="clear:left;"/>

<div class="css-slideshow">
<figure>
<img src="http://e1.365dm.com/12/07/496x259/Park-Chu-Young-South-Korea-vs-UAE_2800634.jpg">
<figcaption>Image 1</figcaption> 
</figure> 

<figure>
<img src="http://e0.365dm.com/14/06/768x432/fifa-world-cup-neymar_3154031.jpg">
<figcaption>Image 2</figcaption> 
</figure> 

<figure>
<img src="http://e1.365dm.com/13/11/768x432/Cristiano-Ronaldo-Portugal-1024_3038379.jpg">
<figcaption>Image 3</figcaption> 
</figure> 

<figure>
<img src="http://e2.365dm.com/14/06/768x432/Andrea-Pirlo-Italy-training_3153597.jpg">
<figcaption>Image 4</figcaption> 
</figure>
</div>

<div id="footer">
<p class="footer">&copy; copyright 2014 soccer-europe.com</p>
</div>
</div>

And the figcaption class :

.css-slideshow figcaption{
margin-left:20px;
position:absolute;
padding:10px 240px 10px 34px;
background:#000000;
color:white;
width:100%;
transition:0.7s ease-out;
opacity:0.9;
font-size:20px;
z-index:-1;
bottom:-54%; /* hides the hover bar */
}

.css-slideshow:hover figure figcaption
{
bottom:-74%;
z-index:1;
-webkit-transform: translateY(-200px);
}

[Paulie_D]

I cannot post a pen as there are three stylesheets and javascript for the content.

You don’t need to use all the CSS & JS to create a codepen….make a reduced case just showing your issue.

You don’t need to include animations & transitions to show us what is, basically, a positioning or overflow issue.

I’m not sure why the figcaptions are even visible at all until required and they certainly shouldn’t be affecting document flow.

[Author]

Posts