PDA

View Full Version : Text hover box on image/video



Hobbs
Jun 16th, 2016, 03:38 PM
So I have a theme on wordpress which I have been heavily editing, the homepage is how I want the blog page to look. However when copying the class tags for the hover boxes, it just shows above the image rather than inside the image. I am guessing I am using too many classes or maybe it just is not going to work the way I need? Maybe I am missing a piece of code somewhere.

The page I want it to look like is this page: Outside The Line (http://outside.hobhob.uk/test/)

Focusing on these sections of code;


.portfolio-item:hover {
-moz-box-shadow: 0 0 30px #000;
-webkit-box-shadow: 0 0 30px #000;
box-shadow: 0 0 30px #000;
position:absolute;
z-index:9999;
}
.imghover-container {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s
}
.imghover-container:hover {
-moz-box-shadow: 0 0 60px #aaa;
-webkit-box-shadow: 0 0 40px #AAA;
box-shadow: 0 0 40px #AAA;
}
There is more to this, quite a few more imghover tags, but I did not want to have a post with huge amounts of code in. Other tags I am looking at are;
.imghover a,.imghover a img, .imghover a div, .imghover a .imghover-text

The page I am currently editing to look like that page is this: Blog | Outside The Line (http://outside.hobhob.uk/test/blog/)

The code I am looking at here is a little different as the PHP checks for certain types of content (video, image, audio, quote etc). I have tried added the hover code to each Title area/excerpt patch. I have edited this to remove them all, but have since added them back in, I guess I have made the section I want to be hidden and appear on hover, so its already within the page now, but I just can't get it to hide away and slide in on hover.. I did originally try just added the class to the div's but this did not work, it did show, but it was just below/above the image rather than hidden and then shown on hover.

The code I have added is;


<h1 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<div class="post-content-excerpt">

<?php the_excerpt(); ?>
</div>
</div>
Using slightly edited CSS of the original just to make the background yellow etc, fix the font and padding. But this is where I have got stuck trying to make it hidden.. Any help would be greatly appreciated. My code started getting quite messy so apologies if I have made little sense.

Sempervivum
Jun 16th, 2016, 03:59 PM
it did show, but it was just below/above the image rather than hidden and then shown on hover.If you want the text to be covering the video / other element you need to position it absolutely.
If the text is covered by the neigboring elements or is not covered by the main element you can control by CSS c-index.