www.webdeveloper.com
Results 1 to 9 of 9

Thread: Magnify an images with CSS

  1. #1
    Join Date
    Mar 2003
    Posts
    262

    Magnify an images with CSS

    I need help to create CSS image popup, to show big image, without
    javascript, based on 'Magnify an image' sample:http://www.cssplay.co.uk/menu/magnify.html

    Main difference is that all my images (i need 3 image - one row) have different size, so I need specify width/heigh for each image, include thumbnails.
    Second thing is that i want convert this css into inline style, since I can no use external css file, nor css inside head section, because my html code will be added inside online listing builder, which have no head and body sections accessible, and accept just raw html code snippets, so I can no control head and body sections.

    Code:
    <style type="text/css">
    
    #menu {position:relative; top:10px; left:100px; width:75px; background-color:#fff; z-index:100;}
    #menu a.p1, #menu a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
    #menu a img {border:0;}
    #menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
    #menu a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
    #menu a.p1:hover .large {display:block; position:absolute; top:-65px; left:150px; width:300px; height:300px; border:10px solid #ccc;}
    
    #info {z-index:100; height:22em;}
    
    </style>
    
    <div id="menu">
    <a class="p1" href="#nogo" title="thumbnail image"><img src="../img/tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" /><img class="large"  src="../img/drips.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
    </div>
    any help will be appreciated.

    Thanks,
    Last edited by Taurus; 03-15-2007 at 07:01 PM.

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Would not "width: auto" suffice, since these are layers, rather than elements needing nested positioning? The image's width would determine the width of the div/span.

    KDLA

  3. #3
    Join Date
    Mar 2003
    Posts
    262
    Does it possible implement all code as inline css at all? There is pseudo elements like :hover, that can't be put in inline styles. I can no place css inside head section, just in listing builder(inside body).

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    You might try a bit of javascript, something like this:
    Code:
    <a href="#" class="little" onmouseover="this.className='big';" onmouseout="this.className='little';">link Text</a>

  5. #5
    Join Date
    Mar 2003
    Posts
    262
    No, I need thumbnails. Well, i will use a stylesheet inside the <body>. Though this not valid, usually works, no worse than many other hacks.

    I need 3 images (one row). Also I need that my thumbnails have not been absolutely positioned(fixed) in some place, since I need put it in any place of html layout where I just need. Big image may popup approximately in center, but this not so important. What I need modify in code?

  6. #6
    Join Date
    May 2004
    Location
    FL
    Posts
    3,453
    Are you looking for something like this? There's other stuff there also.

  7. #7
    Join Date
    Mar 2003
    Posts
    262
    Yes. And I taken the aboved code therefrom. But I am confused with these #menus and a.p1:hovers.. I do not need menu, I need few images in row.
    Last edited by Taurus; 03-16-2007 at 07:05 PM.

  8. #8
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    Simply repeat the code inside the DIV...

    CSS
    Code:
    #menu {
    	position: relative;
    	top: 10px;
    	left: 100px;
    	width: 375px;
    	background-color: #fff;
    	z-index: 100;
    	}
    #menu a.p1, #menu a.p1:visited {
    	margin: 5px;
    	display: block;
    	width: 75px;
    	height: 75px;
    	text-decoration: none;
    	background: #fff; 
    	float: left;
    	}
    #menu a img {border:0;}
    #menu a.p1:hover {
    	text-decoration: none;
    	background-color: #8c97a3;
    	color: #000;
    	}
    #menu a .large {
    	display: block;
    	position: absolute;
    	width: 0;
    	height: 0;
    	}
    #menu a.p1:hover .large {
    	display: block;
    	position: absolute;
    	top: 100px;
    	left: 150px;
    	width: 300px;
    	height: 300px;
    	border: 10px solid #ccc;
    	}
    HTML
    HTML Code:
    <div id="menu">
    	<a class="p1" href="#nogo" title="thumbnail image">
    		<img src="tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" />
    		<img class="large"  src="drips.jpg" title="Enlarged view of image" alt="Enlarged view of image" />
    	</a>
    	<a class="p1" href="#nogo" title="thumbnail image">
    		<img src="tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" />
    		<img class="large"  src="drips.jpg" title="Enlarged view of image" alt="Enlarged view of image" />
    	</a>
    	<a class="p1" href="#nogo" title="thumbnail image">
    		<img src="tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" />
    		<img class="large"  src="drips.jpg" title="Enlarged view of image" alt="Enlarged view of image" />
    	</a>
    </div>
    Last edited by Paul Jr; 03-17-2007 at 03:28 AM.

  9. #9
    Join Date
    Mar 2003
    Posts
    262
    can I use standard width/height image attributes there?
    Code:
    	<a class="p1" href="#nogo" title="thumbnail image">
    		<img src="tdrips.jpg" width="100px" height="150px" border="0" alt="Magnify" />
    		<img class="large"  src="drips.jpg" width="450px" height="500px" border="0" alt="" />
    	</a>
    Last edited by Taurus; 03-17-2007 at 06:09 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles