SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Showing just part of an image?

    I am making a website for a painter. There are different categories of paingings that are displayed in different listings. In the sitebar I would like to show the most recent work with small thumbnails (smaller then the once used in the listings) and a title and text. For the small thumbnails I would like to use the thumbnails that i already have for the listings but I would like to show just a fraction of it. So I decided to use an image holder from 125px x 125px with the property overflow set to hidden and to place the image inside that holder. But somehow it shows the entire thumbnails. This is what I have:

    CSS:
    Code:
    #latest {
      width:94%;
      height: 250px; 
      margin: 30px 3% 0px; 
      position:relative; 
      float: left;
      overflow: hidden; 
      background-color: transparant;
    }
    
    #latest li {
      width: 100%;
      height: 125px;
      display: block;
    }
    
    #latest li.holder {
     width: 123px;
     height: 123px;
     float: left;
     overflow: hidden;
     border: solid 1px #4F81B2;
     position: relative;
     z-index: 0;  
    }
    
    #latest li.holder img {
     position: absolute;
     left: -50%;
     top: -50%;
     z-index: 0; 
    }
    HTML
    Code:
    <ul id="latest">
    	<li>
    		<div class="holder"><img src="latest/diem.jpg" alt=""></div> 
      </li>
    
    	<li>
    		<div class="holder"><img src="latest/miles_davis.jpg" alt=""></div> 
      </li>
      
    	<li>
    		<div class="holder"><img src="latest/peter_diem.jpg" alt=""></div> 
      </li>  
    </ul>
    As you can see did I set the z-index of the image to 0 where the holder has the z-index set to 1.

    What am I doing wrong?

    Thank you in advance.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    donboe, in your example, class "holder" is assigned to a <div> in HTML and to a <li> in css. An oversight?

    Code:
    #latest li.holder {
    
    <li>
        <div class="holder">


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
  •