Making images expand


Is there a way to make an imbeded image pop/expand when hovered over? I found the post about menu and character icons, which has put me on a whole new "How do I do THAT!?" quest. It may be because I'm still very new to CSS, but it seems like imbeded images have a different rule set?


  • cgregory
    Posts: 780

    Typically when I want to do transformations on images I don't use embedded images but rather create the image html myself so I can give it a class and more easily play around with it.

    So for example I might create a linkable image  (in this case the image for the Karma button on the main wiki page of my old X-Com campaign). Obviously you don't need the a href or use the absolute position.

    <a  href="";

    <img class="lefnavimg" STYLE="position:absolute; TOP:175px; LEFT:155px"   src="">;


    Then I do the transform

     .lefnavimg:hover {

        -webkit-transform: translate(1em,0);

        -moz-transform: translate(1em,0);

        -o-transform: translate(1em,0);

        -ms-transform: translate(1em,0);

        transform: translate(1em,0);


    In this case the transform is moving right and moving left (translate), but it is the same idea for using scaling.

    transform: scale(1.1);

    They are among us!


                       XCom: Defiance - Campaign of the Month November 2016



  • Conan_Lybarian
    Posts: 240

    Awesome! I've been digging through all the CSS self teaching sites and info I can find, and that definitely cracks the code. Always solid @cgregory. Thanks!

Sign In or Register to comment.

January 2023
Fake News, Real Adventure

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!