Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Rollovers

Discussion in 'Website Design Forum:' started by rosedani, Oct 3, 2010.

  1. rosedani

    rosedani Member

    Hi all,

    Im VERY new to web design and am currently in the process of designing my own site using Dreamweaver and CSS.

    I can get my head around using div tags to create the overall layout but need help with specific effects if poss!

    I have seen this site recently (creativeuncle.co.uk) and really like the way they have a random image appearing on the home page which highlights recent work. I also like the way they have set up a rollover animation on the image which has specific text relating to the image displayed.

    The only thing I don't like is not being able to achieve this effect in Deamweaver! :(

    Can anyone give me a few pointers on how to achieve this in Deamweaver using CSS? I basically have about 10 different recent projects that I want to display on my home page randomly when people view my home page. I also want a brief description to appear with a link to the portfolio page when people rollover the image.

    Thanks in advance for your replies!
    Dan
     
  2. glenwheeler

    glenwheeler Senior Member

    Hi Dan,

    Thats the css it uses. Just looks like a hover on the large image to me. So on however it places that div to the right with a transparent background. Stuff like this is normally done in Jquery.

    #spotlight div.content {
    background-color: transparent;
    display: none;
    height: 380px;
    padding: 10px 20px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 206px;
    }
     
  3. Levi

    Levi Moderator Staff Member

    theres some javascript involved too Glen, they've got rotating images on refresh....
     
  4. rosedani

    rosedani Member

    Cheers for the responses guys... is there an easy way of achieving this in Dreamweaver or should I just have a static image with text over the top which I update manually?
     
  5. Renniks

    Renniks Senior Member

    Probably no simple way of doing it in DW

    However, while dreamweaver is an amazing piece of software (no matter what people say) I wouldn't advice using it in the manner you seem to be.

    Use it as an extension of your coding knowledge (with extra features to help you get through) not as something to generate your code.

    If you can't code yourself, the output will definitely be sub standard, which is bad for accessibility, search engines, maintainability, development, and general niceness...
     
  6. rosedani

    rosedani Member

    Cheers Renniks, my hand coding skills aren't great to be honest so I was going to set the majority of my site up using Dreamweaver. I might try and simplify the design if it's not possible to do this effect within the program.

    I def need to learn hand coding though... just need an effective way of doing it!
     
  7. Harry

    Harry Senior Member

    Done this for you in pure CSS for nowt: Hover

    We hide the content with opacity:0; then bring it up to opacity:1; when we hover the containing div.
    In webkit browsers we actually fade the opacity, using CSS3.
    We give the text a translucent background using the CSS3 rgba(), and a dark grey background for browsers that don't support rgba().
    Browsers that don't support opacity:; will simply show the text, ensuring that everything stays accessible across all browsers.

    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>Hover</title>
    	<style type="text/css">
            body{
                font-size:100%;
                font-family:Calibri, Arial, Verdana, sans-serif;
            }
            #masthead{
                width:640px;
                height:427px;
                position:relative;
            }
            #masthead:hover #image-details{
                opacity:1;
            }
            #image-details{
                position:absolute;
                width:250px;
                padding:10px;
                height407px;
                top:0;
                right:0;
                opacity:0;
                background:#333;
                background:rgba(0,0,0,0.5);
                -webkit-transition:opacity linear 0.5s;
            }
            p{
                line-height:1.5em;
                margin:0 0 20px 0;
            }
            #image-details p{
                color:#fff;
                text-shadow:1px 1px 1px rgba(0,0,0,0.5);
                margin:0;
            }
        </style>
    </head>
    
    <body>
    	
    	<div id="masthead">
    		<img src="http://farm5.static.flickr.com/4116/4877345244_6cf40b2d42_z.jpg" alt="Climbing Snowdon" />
    		<div id="image-details">
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non.</p>
    		</div>
    	</div>
    	
    </body>
    </html>
    
    With randomisation (requires .php extension). N.B. Not tested:

    PHP:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Hover</title>
        <style type="text/css">
            body{
                font-size:100%;
                font-family:Calibri, Arial, Verdana, sans-serif;
            }
            #masthead{
                width:640px;
                height:427px;
                position:relative;
            }
            #masthead:hover #image-details{
                opacity:1;
            }
            #image-details{
                position:absolute;
                width:250px;
                padding:10px;
                height407px;
                top:0;
                right:0;
                opacity:0;
                background:#333;
                background:rgba(0,0,0,0.5);
                -webkit-transition:opacity linear 0.5s;
            }
            p{
                line-height:1.5em;
                margin:0 0 20px 0;
            }
            #image-details p{
                color:#fff;
                text-shadow:1px 1px 1px rgba(0,0,0,0.5);
                margin:0;
            }
        </style>
    </head>

    <body>
        
        <div id="masthead">
            <?php
                
    //Create a random variable between 1 and 3 to randomise the image
                
    $image rand(1,3);
            
    ?>
            
            <?php if($image == 1){ ?>
            <img src="http://farm5.static.flickr.com/4116/4877345244_6cf40b2d42_z.jpg" alt="Climbing Snowdon" />
            <div id="image-details">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non.</p>
            </div>
            <? }elseif($image == 2){ ?>
            <img src="http://farm5.static.flickr.com/4133/4992825585_73fc2ac85d_z.jpg" alt="Crosby beach" />
            <div id="image-details">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non.</p>
            </div>
            <? ?>
            <? }elseif($image == 3){ ?>
            <img src="http://farm5.static.flickr.com/4108/4992831937_4d2c6cdf3b_z.jpg" alt="Hole of Horcum" />
            <div id="image-details">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non.</p>
            </div>
            <? ?>
        </div>
        
    </body>
    </html>
     
  8. rosedani

    rosedani Member

    Cheers Harry, that's a great help!

    I will sit down over the next few evenings and try to get this working within my site. So do I have to just paste this code into the div tag that I have set up to hold the images? (and update the info to link to specific images)
     
  9. Harry

    Harry Senior Member

    Retro-fit it.

    I probably haven't used the same IDs you have, or the dimensions.
    Best bet is to remove all the code you've done and paste mine in instead, then tweak width/height values in the CSS accordingly.

    Only do this if you understand how each thing works though!!!
    If you're not sure how certain parts work then let me know which bits need explaining.
    You'll never learn anything copying/pasting, and I'd gladly explain stuff to you if it'll help.

    Harry
     

Share This Page