SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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?)

  3. #3
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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>

  5. #5
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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?

  7. #7
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ralph,

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

    Kyle

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    No worries, Kyllle. Which one are you going with? The modified version of the jsfiddle one?

  9. #9
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first example is excellent but for the requirements Im going with the jsfiddle version, thanks again!

  10. #10
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  11. #11
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, got it. I removed the line height and added top: 50% to the .imgHover .img is that how you would have done it?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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?

  13. #13
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •