html - How to fix the code for hovering an image, then show a bigger version of that image with the same resolution? -

i writing website , here outlook

.

ideally, want show me same image, bigger size , same resolution. did having 2 identical images, 1 big 1 small. here code:

the "heading div" banner on top while "content div" image have hover effect. played around , looked many different ways solve online, still cannot figure out how so, can me out please?

added: more direct on trying do, made axure mock up: http://muzuf7.axshare.com . idea here having smaller image on inside tile , having mouse-hover function. when hover smaller image, bigger image shows on top of smaller image. clear if interact axure mock did.

if understanding correctly, can following can increase image's size on hover contain within div using overflow: hidden. can use transitions , whatnot make effect prettier here:

html:

<div class="content">   <div id="magic">   <a id="hover"><img src="img.png" alt="vienna parliament" /></a>   </div> </div> 

css:

.content img {   width: 100%;   height: 100%; } #magic {   max-width: 200px;   max-height: 100px;   overflow: hidden; } .content img:hover {   width: 110%;   height: 110%; } 

is type of thing you're looking for?