Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Hover - Magnify Images

Discussion in 'Website Design Forum:' started by solvaworld, May 17, 2010.

  1. solvaworld

    solvaworld Member

    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
  2. tbwcf

    tbwcf Active Member

    .imageClass {width:90%; height:90%;}
    .imageClass:hover {width:100%; height:100%;}
  3. Harry

    Harry Senior Member

    img:hover{  -moz-transform:scale(1.1);  -webkit-transform:scale(1.1);}
  4. solvaworld

    solvaworld Member

    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
  5. Harry

    Harry Senior Member

    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.
  6. solvaworld

    solvaworld Member

    Hi the thing is this is only for a gallery page so I don't want it to be in effect all over the site
  7. Harry

    Harry Senior Member

    Okay well have you got a link? Or some HTML that powers the gallery, then I can tailor the CSS to suit.
  8. solvaworld

    solvaworld Member

  9. Harry

    Harry Senior Member

    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 :(
  10. solvaworld

    solvaworld Member

  11. Greg

    Greg Active Member

    solvaworld - If you use the code button > [​IMG]
    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.

  12. Harry

    Harry Senior Member

    You really ought to learn how to code without tables.


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

    solvaworld Member

    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.
  14. Harry

    Harry Senior Member

    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.
  15. glenwheeler

    glenwheeler Senior Member

    Harry's world totally collapsed when he saw can tell haha!
  16. solvaworld

    solvaworld Member

    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

    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);}
  17. solvaworld

    solvaworld Member

  18. solvaworld

    solvaworld Member

    Hi all managed to get them to work, How would I go about increasing the magnified size of the images?

    Thanks all
  19. Harry

    Harry Senior Member

    Change 1.1 to a larger number.

Share This Page