CSS Image swap not working.

Discussion in 'HTML and CSS' started by ZombieDude, Feb 23, 2016.

  1. ZombieDude

    ZombieDude

    Joined:
    Feb 23, 2016
    Messages:
    1
    Likes Received:
    0
    I am creating a simple "coming soon" page and for the life of me cannot figure out how to create an image link that, when hovered over, changes to another image. I've trawled google and cannot find an answer that works. I am guessing I am missing something obvious and have overlooked it. I feel like I can't see the wood for the trees.

    Html :
    HTML:

    <!doctype html>

    <html lang="en">
    <head>
      <meta charset="utf-8">

      <title>Ablockalypse</title>
      <meta name="description" content="Ablockalypse">
      <meta name="author" content="Coming Soon">

      <link rel="stylesheet" href="stylesheet.css">

    </head>

    <body>
    <div id="container">
        <img src="images/cityscape.png">
            <div class="fade-in header">
                <img src="images/banner.png">
           
                       
            </div>
    <div class="fade-in logo">
        <img src="images/Logo.png">
    </div>


    </div>


    <div class="zoomInUp splat1">
        <img src="images/splat1.png">
    </div>

    <div class="zoomInUp splat2">
        <img src="images/splat2.png">
    </div>

    <div class="zoomInUp splat3">
        <img src="images/splat3.png">
       
               
    </div>
    <div class="fade-in info">
        <a href="index.html"><img src="images/info_green.png"></a>

    </div>
    <!-- <audio controls autoplay loop>
     <source src="sound/music.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
    </audio> -->
    </body>
    </html>
     
    Code (CSS):
    body {
        background-color: #746747
       
       
    }

    #container {
        position: relative;
        width: 800px;
        height: auto;
        display: block;
        margin: auto;
        max-width: 100%;
        width: auto\9; /* ie8 */
    }

    .header {
        position: absolute;
        top: 20px;
        left: 6%;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }

    .logo {
        position: absolute;
        top: 40%;  
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
        -ms-transform: rotate(13deg); /* IE 9 */
        -webkit-transform: rotate(13deg); /* Chrome, Safari, Opera */
        transform: rotate(8deg);
    }


    .splat1{
        position: absolute;
        top: 10%;
        left: 6%;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
        }
       
    .splat2{
        position: absolute;
        top: 40%;
        left: 70%;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
        }
       
    .splat3{
        position: absolute;
        top: 50%;
        left: 10%;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
        }
       
    .info {
        position: absolute;
        top: 450px;
        left:42%;
        width: 276px;
        height: 134px;
        background-image: url(images/info_red.png) no-repeat;
       
    }

    .info:hover {
       
        background-image: url(images/info_red.png) no-repeat;
    }

    @-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
    @-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
    @keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }

    .fade-in {
        opacity:0;  /* make things invisible upon start */
        -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
        -moz-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;

        -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
        -moz-animation-fill-mode:forwards;
        animation-fill-mode:forwards;

        -webkit-animation-duration:1s;
        -moz-animation-duration:1s;
        animation-duration:1s;
    }

    .zoomInUp {
        opacity:0;  /* make things invisible upon start */
        -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
        -moz-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;

        -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
        -moz-animation-fill-mode:forwards;
        animation-fill-mode:forwards;

        -webkit-animation-duration:0.01s;
        -moz-animation-duration:0.01s;
        animation-duration:0.01s;
    }

    .fade-in.header {
    -webkit-animation-delay: 1.0s;
    -moz-animation-delay: 1.0s;
    animation-delay: 1.0s;
    }

    .fade-in.logo {
    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
    animation-delay: 3.5s;
    }

    .fade-in.info {
    -webkit-animation-delay: 5.0s;
    -moz-animation-delay: 5.0s;
    animation-delay: 5.0s;
    }

    .zoomInUp.splat1 {
    -webkit-animation-delay: 7.0s;
    -moz-animation-delay: 7.0s;
    animation-delay: 7.0s;
    }

    .zoomInUp.splat2 {
    -webkit-animation-delay: 7.5s;
    -moz-animation-delay: 7.5s;
    animation-delay: 7.5s;
    }

    .zoomInUp.splat3 {
    -webkit-animation-delay: 8.0s;
    -moz-animation-delay: 8.0s;
    animation-delay: 8.0s;
    }
    I have tried removing the line
    HTML:
    <img src="images/info_green.png">
    but to no avail.

    Can anyone solve what I have messed up?!?
    Any and all help is really appreciated!!
     
    ZombieDude, Feb 23, 2016
    #1
    1. Advertisements

  2. ZombieDude

    Exodus_AU

    Joined:
    May 8, 2016
    Messages:
    3
    Likes Received:
    0
    Hi,

    Your code has some problems, are you running an IDE? you should grab one if you are not, they help with correct syntax.

    Your problem is that CSS for info needs quotes around the image URL's.

    Here is a working version with images from google.

    (i havent cleaned up any of the syntax issues).

    HTML:

    <!doctype html>

    <html lang="en">
    <head>
      <meta charset="utf-8">

      <title>Ablockalypse</title>
      <meta name="description" content="Ablockalypse">
      <meta name="author" content="Coming Soon">

      <link rel="stylesheet" href="stylesheet.css">

    <style>
    body {
        background-color: #746747


    }

    #container {
        position: relative;
        width: 800px;
        height: auto;
        display: block;
        margin: auto;
        max-width: 100%;
        width: auto\9; /* ie8 */
    }

    .header {
        position: absolute;
        top: 20px;
        left: 6%;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
    }

    .logo {
        position: absolute;
        top: 40%;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
        -ms-transform: rotate(13deg); /* IE 9 */
        -webkit-transform: rotate(13deg); /* Chrome, Safari, Opera */
        transform: rotate(8deg);
    }


    .splat1{
        position: absolute;
        top: 10%;
        left: 6%;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
        }

    .splat2{
        position: absolute;
        top: 40%;
        left: 70%;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
        }

    .splat3{
        position: absolute;
        top: 50%;
        left: 10%;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
        }

    .info {
        position: absolute;
        top: 450px;
        left:42%;
        width: 276px;
        height: 134px;
        background-image: url("http://vignette1.wikia.nocookie.net/dezulandfwinds/images/4/4a/1.png/revision/20150428220012");

    }

    .info:hover {

        background-image: url("http://www.getdownintwo.com/wp-content/uploads/2013/06/2-graphic.png");
    }

    @-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
    @-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
    @keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }

    .fade-in {
        opacity:0;  /* make things invisible upon start */
        -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
        -moz-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;

        -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
        -moz-animation-fill-mode:forwards;
        animation-fill-mode:forwards;

        -webkit-animation-duration:1s;
        -moz-animation-duration:1s;
        animation-duration:1s;
    }

    .zoomInUp {
        opacity:0;  /* make things invisible upon start */
        -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
        -moz-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;

        -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
        -moz-animation-fill-mode:forwards;
        animation-fill-mode:forwards;

        -webkit-animation-duration:0.01s;
        -moz-animation-duration:0.01s;
        animation-duration:0.01s;
    }

    .fade-in.header {
    -webkit-animation-delay: 1.0s;
    -moz-animation-delay: 1.0s;
    animation-delay: 1.0s;
    }

    .fade-in.logo {
    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
    animation-delay: 3.5s;
    }

    .fade-in.info {
    -webkit-animation-delay: 5.0s;
    -moz-animation-delay: 5.0s;
    animation-delay: 5.0s;
    }

    .zoomInUp.splat1 {
    -webkit-animation-delay: 7.0s;
    -moz-animation-delay: 7.0s;
    animation-delay: 7.0s;
    }

    .zoomInUp.splat2 {
    -webkit-animation-delay: 7.5s;
    -moz-animation-delay: 7.5s;
    animation-delay: 7.5s;
    }

    .zoomInUp.splat3 {
    -webkit-animation-delay: 8.0s;
    -moz-animation-delay: 8.0s;
    animation-delay: 8.0s;
    }
    </style>


    </head>

    <body>
    <div id="container">
        <img src="images/cityscape.png">
            <div class="fade-in header">
                <img src="images/banner.png" />


            </div>
    <div class="fade-in logo">
        <img src="images/Logo.png" />
    </div>


    </div>


    <div class="zoomInUp splat1">
        <img src="images/splat1.png">
    </div>

    <div class="zoomInUp splat2">
        <img src="images/splat2.png">
    </div>

    <div class="zoomInUp splat3">
        <img src="images/splat3.png">


    </div>
    <div class="fade-in info">
        <a href="index.html"><img src="images/info_green.png"></a>

    </div>
    <!-- <audio controls autoplay loop>
    <source src="sound/music.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio> -->
    </body>
    </html>

     
     
    Exodus_AU, May 8, 2016
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.