Skip navigation
Currently Being Moderated

Help with CSS image Gallery

Apr 30, 2013 12:42 PM

Found this simple css image gallery. However I'm having trouble adjusting it do my needs. I ideally want to make each small image slightly bigger than currently and have 3 or 4 on each line. Also want to make the enlarged image bigger. The width would need to be around 550px.

 

<style type="text/css">

/* *********************************************

* This notice MUST stay intact for legal use.

* This script was created for FREE CSS Menus.

* Visit: www.freecssmenus.co.uk for more CSS.

* Also visit our Free online menu creator.

************************************************ */

/* credits: www.freecssmenus.co.uk */

#pg { width:390px;

height:200px;

border:2px dotted #666;

padding:5px;

padding-top:15px;

}

#pg ul { list-style:none;

  padding:0;

  margin:0;

  width:180px;

  position:relative;

  float:left;

}

#pg ul li { display:inline;

  width:52px;

  height:52px;

  float:left;

  margin:0 0 8px 8px;

}

#pg ul li a { display:block;

  width:50px;

  height:50px;

  text-decoration:none;

  border:1px solid #000;

}

#pg ul li a img { display:block;

  width:50px;

  height:50px;

  border:0;

}

#pg ul li a:hover { white-space:normal;

  border-color:#336600;

background-color:#AABB33;

}

#pg ul li a:hover img { position:absolute;

  left:190px;

top:0;

  width:auto;

  height:110px;

  border:1px solid #000;

}

#pg ul li a span {display:none}

#pg ul li a:hover span { display:block;

position:absolute;

  left:5px;

  top:130px;

  width:350px;

  height:auto;

font-size:12px;

color:#999999;

}

 

</style>

 

html

 

<div id="pg">

  <ul>

  <li>

<a href="css_rollover_uk_map.php">

<img src="upimage/ukmap345.jpg" alt="Css Rollover Map" />

<span>

<strong>

CSS Map.</strong>

CSS Image swap on rollover/hover. This simple display of CSS shows the versatility of Cascading Style Sheets. Remember this animation is 100% User Accessible.</span>

</a>

</li>

  <li>

<a href="big_css_button.php">

<img src="upimage/bigbutton1390.jpg" alt="Large Css Button" />

<span>

<strong>

CSS Big Button.</strong>

Css buttons can be as large and as extravagant as you like. Using one image you can create simple css buttons like this. This button is still a hyperlink not just an image.</span>

</a>

</li>

  <li>

<a href="menu_opacity.php">

<img src="upimage/003opacity639.jpg" alt="Css Opacity" />

<span>

<strong>

CSS Opacity Menu.</strong>

  you can use styles to change the opacity of an image. This creates interesting effects when creating a menu. </span>

</a>

</li>

  <li>

<a href="#">

<img src="upimage/freemusic885.jpg" alt="Free Mp3 Downloads: Unborn Records" />

<span>

<strong>

Unborn Records </strong>

Download free mp3 music for your ipod or mp3 player. Download free music from unsigned artists</span>

</a>

</li>

  <li>

<a href="#">

<img src="upimage/trix363.jpg" alt="Visit Trix the dog at www.catandtwodogs.co.u" />

<span>

<strong>

Cat And Two Dogs </strong>

Visit my three pets at www.catandtwodogs.co.uk . This is a picture of trix, he's a border collie.</span>

</a>

</li>

  <li>

<a href="#">

<img src="upimage/colours238.jpg" alt="A picture of colours in a swirl" />

<span>

<strong>

A swirl of colours. </strong>

This is just a picture of colours in a swirl effect.</span>

</a>

</li>

  </ul>

</div>

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points