Question

I have to scale up the image when I hover over it, it should scale up to 300×225 pixels from 100×75 pixels. Layout seems to work fine, it’s just width does not scale up when hovered. Thank you in advance. The image should not scale more than the 300×225 pixels.

CSS:

.hoverbox a .preview {
   display: none; 
}
.hoverbox a .preview img {
   display: inline; 
}
.hoverbox a:hover .preview {
   display: block;
   position: absolute;
   top: -1em;
   left: -2em;
   z-index: 10;
   border-width: 1px 1px 6px 1px; 
   border-style: solid; 
   border-color: #fff7ea;
   border-radius: 3px; 
   -moz-border-radius: 3px; 
   -webkit-border-radius: 3px; 
   -moz-box-shadow: 2px 2px 2px #161615;
   -webkit-box-shadow: 2px 2px 2px #161615;
   box-shadow: 2px 2px 2px #161615;
}
.hoverbox img {
   background: #fff;
   border-width: 1px 1px 6px 1px; 
   border-style: solid; 
   border-color: #fff7ea;
   border-radius: 3px; 
   -moz-border-radius: 3px; 
   -webkit-border-radius: 3px; 
   -moz-box-shadow: 2px 2px 2px #161615;
   -webkit-box-shadow: 2px 2px 2px #161615;
   box-shadow: 2px 2px 2px #161615;
       padding: 2px;
   vertical-align: top;
   width: 100px;
   height: 75px;
}
.hoverbox li
{
   background: transparent;
   display: inline;
   float: left;
   margin: 3px;
   padding: 5px;
   position: relative;
 }

.hoverbox .preview {
   width: 300px;
   height: 225px;
}

HTML:

    <section>  
         <h1 class="headline">Feast your eyes.</h1>
         <ul class="hoverbox">
            <li>
                <a href="#"><img src="200opt.jpg" alt="descr"/><img src="200opt.jpg" alt="description" class="preview" /></a>
            </li>
         </ul>

    </section>

Thank you

Answer 1

Take a look at this approach using Jquery:

$('img').hover(function(){

$(this).width('500px');
$(this).height('400px');


}, function(){

    // set default image width & height

$(this).width('400px');
$(this).height('300px');


})​

Example