• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

CSS Hover - Magnify Images


#1
Hello All,

I have had a request to make someones images magnified when selected.

I think the best way to go about this is to make them magnified when they are hovered over in CSS.

Any pointers to the code. I have googled it but not sure about some of the suggestions I have seen so far. Best to ask the experts.

Thanks All
 
#4
Hi gents thank you. Just a quick one do I have to add the css code and html or can I just add the css also withregard to the css where about in the style sheet should I place it. Thanks all
 

Harry

Senior Member
#5
Make sure the selector tallies up with the markup (mine will do all images on a page) and place it wherever you see fit. If you have any other CSS pertaining to images, put it there.
 

Harry

Senior Member
#9
Ew, that's not good. Who wrote the code? Tables shouldn't be being used, I can't even see where your gallery is in there :S
The whole thing needs redoing :(
 

Greg

Active Member
#11
solvaworld - If you use the code button >

You can wrap code tags around your pasted code, that solves the spacing problems and keeps everything formatted. Have edited your previous posts and added that for you.

Thanks,
Greg
 

Harry

Senior Member
#12
solvaworld said:
Ha erm that would be me, gallery section is pasted below although I have no images yet they will go where the spacers are located

Code:
<table width="100%" border="0" cellspacing="10" cellpadding="2">                <tr>                  <td width="50%" align="center" style="border: 1px solid #999999;"><table width="100%" border="0" cellspacing="1" cellpadding="2">                      <tr>                        <td align="center"><img src="http://www.designforums.co.uk/images/spacer.gif" width="60" height="60" style="border: 1px solid #666666; background: #FFFFFF;"></td>                      </tr>                      <tr>                        <td align="center"><span class="black">Image1</span></td>                      </tr>                      <tr>                                              </tr>                  </table></td>                  <td width="50%" align="center" style="border: 1px solid #999999;"><table width="100%" border="0" cellspacing="1" cellpadding="2">                      <tr>                        <td align="center"><img src="http://www.designforums.co.uk/images/spacer.gif" width="60" height="60" style="border: 1px solid #666666; background: #FFFFFF;"></td>                      </tr>                      <tr>                        <td align="center"><span class="black">Image2</span></td>                      </tr>                      <tr>                                            </tr>                  </table></td>                </tr>                <tr>                  <td align="center" style="border: 1px solid #999999;"><table width="100%" border="0" cellspacing="1" cellpadding="2">                      <tr>                        <td align="center"><img src="http://www.designforums.co.uk/images/spacer.gif" width="60" height="60" style="border: 1px solid #666666; background: #FFFFFF;"></td>                      </tr>                      <tr>                        <td align="center"><span class="black">Image3</span></td>                      </tr>                      <tr>                                              </tr>                  </table></td>                  <td align="center" style="border: 1px solid #999999;"><table width="100%" border="0" cellspacing="1" cellpadding="2">                      <tr>                        <td align="center"><img src="http://www.designforums.co.uk/images/spacer.gif" width="60" height="60" style="border: 1px solid #666666; background: #FFFFFF;"></td>                      </tr>                      <tr>                        <td align="center"><span class="black">Image4</span></td>                      </tr>                      <tr>                                              </tr>                  </table></td>                </tr>                <tr>                  <td align="center" style="border: 1px solid #999999;"><table width="100%" border="0" cellspacing="1" cellpadding="2">                      <tr>                        <td align="center"><img src="http://www.designforums.co.uk/images/spacer.gif" width="60" height="60" style="border: 1px solid #666666; background: #FFFFFF;"></td>                      </tr>                      <tr>                        <td align="center">Image5</td>                      </tr>                      <tr>                                             </tr>                  </table></td>                  <td align="center" style="border: 1px solid #999999;"><table width="100%" border="0" cellspacing="1" cellpadding="2">                      <tr>                        <td align="center"><img src="http://www.designforums.co.uk/images/spacer.gif" width="60" height="60" style="border: 1px solid #666666; background: #FFFFFF;"></td>                      </tr>                      <tr>                        <td align="center"><span class="black">Image6</span></td>                      </tr>                      <tr>                                              </tr>                  </table></td>                </tr>            </table>
You really ought to learn how to code without tables.

However:

HTML:
<table width="100%" border="0" cellspacing="10" cellpadding="2" id="gallery">
...
</table>
Code:
#gallery img:hover{  -moz-transform:scale(1.1);  -webkit-transform:scale(1.1);}
 
#13
Agreed Harry,

However should I put the css in seperate section relating to the gallery page are can I just add it to the bottom of the style sheet. And can I assume that the html code goes at the top of the table and the bottom. Thanks Harry, I will be reading HTML for dummies later.
 

Harry

Senior Member
#14
You know your opening table tag? Just add id="gallery" to it, and then place the CSS with any other gallery/image styles in your stylesheet.
 
#16
Its safe to say that harry isnt a fan of my tables,

Have added the html and the css, doesnt seem to make any difference at the moment

Heres the css

Code:
body {background: #325509;}td { font: normal 11px Tahoma, Arial; color: #FFFFFF;}h1, h2, h3, h4, h5 {    color: #FFFFFF;    margin: 0px;}h1 {    font-size: 35px;}h2 {    font: normal tahoma, arial 24.45px;}h3 {    font-size: 14px;}a {font: normal 11px Tahoma, Arial;color: #91ff00;text-decoration: underline;}a:hover {font: normal 11px Tahoma, Arial;color: #91ff00;text-decoration: none;}a.white-link-underline {  text-decoration: underline; color: #FFFFFF;}.white-text{color: #ffffff;text-decoration: none;}a.b1{font:  14px tahoma, Arial;color: #fffea0;text-decoration: none;padding: 15px;margin: 0px;}.p{padding: 0 0 0 20px;}.p1{padding: 0 0 0 40px;}.p2{padding: 150px 0 0 250px;}.bg1{background: #000000 url(images/index_10.gif) top no-repeat;}.bg2{background: #000000 url(images/index_10.gif) top no-repeat;}.bord{border: 1px solid #c5d85a;}.menu {color:#8c247b;vertical-align:top;height: 35px;padding: 10px 0 0 20px;}.menu a{color:#8c247b;font: bold 11px  tahoma, Arial;text-decoration: none;}.blye-text-underline {color: #a257e0;text-decoration: underline;}.blye-text-regular {color: #a257e0;text-decoration: none;}.yellow-text-regular {color: #ffb400;text-decoration: none;}.yellow-text-underline {color: #ffb400;text-decoration: underline;}.orange-text-regular {color: #fe6b1d;text-decoration: none;}.orange-text-underline {color: #fe6b1d;text-decoration: underline;}.broun-text-regular {color: #de4e06;text-decoration: none;}.broun-text-underline {color: #de4e06;text-decoration: underline;}.red-text-regular {color: #8c247b;text-decoration: none;}.red-text-underline {color: #8c247b;text-decoration: underline;}.black-text-regular {color: #000000;text-decoration: none;}.black-text-underline {color: #000000;text-decoration: underline;}.gray-text-underline{color: #7c7c7c;text-decoration: underline;}.gray-text-regular{color: #7c7c7c;text-decoration: none;}.green-text{color: #91ff00;text-decoration: none;}.green-text-underline{color: #91ff00;text-decoration: underline;}.homelowerheader { font-weight: bold; font-size: 14px;}.p1 table tr td .homelowercontent { color: #91ff00; font-style: italic;}.p1 table tr td strong { font-weight: normal;}.p1 table tr td {}.sidelowerheader { font-size: 16px; font-weight: bold;}.servicesmenu { font-size: 14px; color: #9F6;}.servicesmenu { font-size: 16px; color: #91ff00;}.contactheader { font-size: 24px; color: #91ff00;}.contactcontent { font-size: 14px;}.contactheader { font-size: 24px;}.contactcontent { font-size: 18px;}.contactcontent { font-family: "Century Gothic";}#gallery img:hover{  -moz-transform:scale(1.1);  -webkit-transform:scale(1.1);}