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

**kyllle** · May 9, 2011 06:02

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

**ralph.m** · May 9, 2011 06:11

Is this something like what you want?

https://buildinternet.s3.amazonaws.c...oxes/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?)

**kyllle** · May 9, 2011 06:26

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?

**ralph.m** · May 9, 2011 07:25

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.)

Code:

<!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>

**kyllle** · May 9, 2011 07:28

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

**ralph.m** · May 9, 2011 07:48

You could align it like this:

Code:

<!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?

**kyllle** · May 9, 2011 09:08

Hey Ralph,

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

Kyle

**ralph.m** · May 9, 2011 09:10

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

**kyllle** · May 9, 2011 09:15

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

**kyllle** · May 10, 2011 01:15

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?

**kyllle** · May 10, 2011 01:17

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

**ralph.m** · May 10, 2011 02:29

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?

**kyllle** · May 10, 2011 03:47

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

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions