Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    19
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Image Enlarge on Hover

    I am creating a portfolio for a sign company,. I have used this CSS and HTML image enlarge on hover before and it worked. Im thinking its conflicting with other global css codes. But its not enlarging when I hover. I did include the Css in the header tag, but maybe it should be added to the global.css? You can view the live image at http://www.fromhomewebdesign.com/FlagshipSigns/led.html

    HTML
    Code:
    <div class="portfolioBox1">
    					<h2>Our Work</h2>
    						<!--  / PORTFOLIO  \ -->
    						<div class="portfolio1">
    						<a class="thumbnail" href="#thumb"><IMG SRC="images/portfolio_img1.jpg" width="193px" height="137px"  ALT=""><span><img src="images/portfolio_img1large.jpg" /></span></a>                        
    						<img src="images/portfolio_img2.jpg" alt="" />
    						<img src="images/portfolio_img2.jpg" alt="" />
                            </div>
    CSS In the header
    Code:
    <style type="text/css">
    
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px solid green;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */
    
    }
    
    </style>
    GLOBAL CSS
    Code:
    .portfolioBox1 { padding: 20px 0px 0px 10px; width: 675px; overflow: hidden; }
    			.portfolioBox1 h2 {
    	padding:24px 22px 28px 82px;
    	font-size: 36px;
    	font-family:Nuptial BT;
    	color: #49fb7e;
    	font-weight: normal;
    	background: url(../images/portfolio_heading.png) left top no-repeat;
    }
    			.portfolio1{ padding:20px 0px 36px 20px; width: 665px; overflow:hidden; border-bottom: solid 1px #1d1d1d;}
    			
    					
    			.portfolioBox1 p { padding-bottom:24px; font-size: 14px; color: #A6A5A5; line-height: 20px; }
    			.portfolioBox1 img { margin-right:5px; float:left;  border: solid 10px #333333; }
    			.portfolioBox1 a { padding-top: 5px; text-decoration: none; text-align: center; color: #000; width: 85px; height: 20px;  } 
    			.portfolioBox1 a:hover {}
    			.portfolioBox1 .lasst{ padding-bottom:80px; border:none;}

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there nikc121,

    would it not be easier to just change the image's dimensions instead?

    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <base href="http://www.fromhomewebdesign.com/FlagshipSigns/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body {
        background-color:#000;
     }
    h2 {
        width:683px;
        font-weight:normal;
        color:#49fb7e;
        text-align:center;
        background-image:url(images/portfolio_heading.png);
     }
    .portfolio1{ 
        padding:20px 0 36px 20px;
        width:665px; 
        height:157px;
        border-bottom: solid 1px #1d1d1d;
     }
    .portfolioBox1 img { 
        margin-right:5px;
        float:left;   
        border: solid 10px #333;
     }
    .portfolioBox1 a { 
        padding-top:5px; 
        text-decoration: none; 
        text-align:center; 
        color:#000;
     } 
    .thumbnail {
        position:relative;
        float:left;
        width:218px;
        height:157px;
     }
    .thumbnail img {
        position:absolute;
        top:0;
        left:0;
        width:193px;
        height:137px;
     }
    .thumbnail:hover img {
        width:400px;
        height:284px;
        padding:8px;
        border:1px solid #49fb7e;
        background-color:#333;
     }
    </style>
    
    </head>
    <body>
    
    <div class="portfolioBox1">
    
    <h2>Our Work</h2>
    
    <div class="portfolio1">
    
    <a class="thumbnail" href="#thumb"><img src="images/portfolio_img1large.jpg"  alt=""></a>
     
    <img src="images/portfolio_img2.jpg" alt="">
    <img src="images/portfolio_img2.jpg" alt="">
    
    </div>  
    
    </div>  
     
    </body>
    </html>                 
    
    coothead

  • Users who have thanked coothead for this post:

    nikc121 (04-13-2013)

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    19
    Thanks
    7
    Thanked 0 Times in 0 Posts

    It worked

    After seeing your simple explanation,, I was able to use just the .thumbnail hover. Works great, and is very simple. Thanks a bunch.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    No problem, you're very welcome.


    coothead


  •  

    Posting Permissions

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