• Locked
2 replies [Last post]
Wed, 2013-08-21 04:41
vytfla
vytfla's picture
Offline
newbie
Last seen: 9 years 23 weeks ago
Timezone: GMT-7
Joined: 2013-08-21
Posts: 2
Points: 3

I'm using wordpress and I've set it so whenever the user creates a new post with a featured image, that image displays on the front page. What I am trying to accomplish is that when the user hovers over that image , it will overlay a black bg. I thought my HTML was written in a way I could easily accomplish this, but I am having trouble figuring it out, and don't know how to proceed. Thoughts? (CSS is bare since nothing I've done has yielded any results)

<div class="main top top-fix over" role="main">
	<div class="over">
		<!-- Display featured images -->
		<?php 
			$args = array('post_type'=> 'page');
			query_posts( $args );
		?>
 
		<!-- Get featured images -->
		<div class="main-thumb">
			<?php 
				if ( have_posts() ) {
					while ( have_posts() ) {
						the_post(); 
				?>
					<div class="main-link">
						<a href="<?php echo get_permalink(); ?>">
								<div class="overlay caps">
									<?php 
										echo(types_render_field("top-overlay", array("output"=>"html")));
									?>
									<?php 
										echo(types_render_field("bottom-overlay", array("output"=>"html")));
									?>
								</div> <!-- end .OVERLAY-->
 
								<div class="tint">
									<?php the_post_thumbnail(); ?>
								</div> <!-- end .TINT-->
						</a>
					</div> <!-- end .MAIN-LINK-->
			<?php
					} 
				} 
			?>
		</div> <!-- end .MAIN-THUMB-->
	</div> <!-- end .OVER -->
</div> <!-- end .MAIN -->

.main {
	width: 99.6em;
}
 
.wp-post-image {
	margin: 0 1.5em 3em;
	display: block;
	float: left;
}
 
.tint {
	background: #000;
	display: block;
}

Top
Tags:
Wed, 2013-08-21 05:06
#1
vytfla
vytfla's picture
Offline
newbie
Last seen: 9 years 23 weeks ago
Timezone: GMT-7
Joined: 2013-08-21
Posts: 2
Points: 3

Is there an easy javascript

Is there an easy javascript way to do what I'm looking for? I've only been trying CSS since I don't really know jscript.

Top
Wed, 2013-08-21 09:43
#2
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 hours 26 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

We can't really work out

We can't really work out whats going on by the PHP. you are better off to provide the page source.
If I understand what you are trying to do correctly try something like:

.tint {
	background: rgba(0, 0, 0, 0.5);;
	position: fixed;
        top:0;
        left:0;
        height:100%;
        width:100%;    
}

Top
  • Locked