jQuery - hover over content div to reveal read more link?

Hi all,

Im new to jquery and trying to learn and also implement, what I would like to do is have a content div that maybe holds an image, header and content. When this div is hovered over the div is overlayed with a transparent color and a read more link is also displayed.

Can anyone give me some advice on how this would be achieved or if there are any good tutorials online that can teach me this technique?

Kyle

Is this something like what you want?

https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm

(The last box links back to a tutorial.)

Or something like this?

Test

(Explanation here)

If these aren’t quite what you mean, can you link to an example of what you are picturing? (Or have you not actually seen this in action?)

Hey Ralph,

Thanks for the reply, yeah these examples are cool but what I want to do is slightly different, I have seen on a good few sites in the past but I cant think of any off the top of my head. I have uploaded an image here when the user hovers over that div that has the image and content then an orange overlay with very low opacity and a read more button appear?

Hmm, it’s a bit hard to interpret that image. Do you mean something like this? (Paste code into a .html file and double click.)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
*{ padding:0px; margin:0px;}
			
.boxgrid { 
  width: 325px; 
  height: 260px; 
  margin:10px;  
  background:#161613; 
  border: solid 2px #8399AF; 
  overflow: hidden; 
  position: relative; 
}

.boxgrid img { 
  position: absolute; 
  top: 0; 
  left: 0; 
  border: 0; 
}

.boxgrid p { 
  text-align: center;
  line-height: 260px; 
  color:#afafaf; 
  font-weight:bold; 
  font-family: "Lucida Grande", Arial, sans-serif; 
}

.boxgrid a {
  color: black;
  padding: 20px;
  background: white;
}
				
.boxcaption{ 
  float: left; 
  position: absolute; 
  background: #000; 
  height: 260px; 
  top: 260px;
  width: 100%; 
  opacity: .4;
  /* For IE 8 */
  -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
</style>
</head>
<body>


<div class="boxgrid slideright">
<img src="http://pageaffairs.com/sp/einstein.jpg">
  <div class="cover boxcaption">
  <p><a href="#">Read More</a></p>
  </div>
</div>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.boxgrid.slideright').hover(function(){
        $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
        }, function() {
	$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
    });				
  });
</script>
</body>
</html>

Hi Ralph,

This is where Im at now with the hover effect, im struggling to align the read more link.Any ideas where Im going wrong?

Link

You could align it like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
.imgHover{
  position: relative;
  width: 460px;
  cursor: pointer;
}
    
.imgHover .hover {
  display: none;
  position:absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
}

.hover p {
  text-align: center;
  line-height: 400px; width: 460px;}
</style>
	
</head>


<body>
<div class="imgHover">
  <div class="hover"><p><a href="#">Read More</a></p></div>
    <div class="content">        
      <img src="http://pageaffairs.com/sp/fff.jpg" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in sem nec quam placerat dapibus. Nam tempus commodo ligula, eget sollicitudin neque dapibus et.</p>
  </div>
</div>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript"> 
$(function() {
  $(".imgHover").hover(
    function() {
      $(this).children(".content").fadeTo(200, 0.25).end().children(".hover").show();
      },
      function() {
        $(this).children(".content").fadeTo(200, 1).end().children(".hover").hide();
     });
  });
</script>

</body>
</html>

Did you see my other example above?

Hey Ralph,

Just looked at your example there now, thats perfect! Thanks for your help! :slight_smile:

Kyle

No worries, Kyllle. Which one are you going with? The modified version of the jsfiddle one?

The first example is excellent but for the requirements Im going with the jsfiddle version, thanks again!

Hi Ralph,

I noticed you have line-height in there to position the Read more link, If I add more content then the read more link wont center to the overall div content instead remaining in the middle of the image? I want to use this across multiple div sizes with various amounts of content so the read more link needs to be able to adapt, can this be achieved?

Sorry, got it. I removed the line height and added top: 50% to the .imgHover .img is that how you would have done it?

Vertical centering is tricky, unless you use display: table etc, but that doesn’t work in versions of IE below 8. Does that matter to you?

Hi Ralph,

yeah I need to be able to view in ie7 at the min which is a problem right now

im trying something right now that Il post on jsfiddle once i think im close

Kyle