CSS Image swap not working.

Z

ZombieDude

Joined
Feb 23, 2016
Messages
1
Reaction score
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>

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!!
 
E

Exodus_AU

Joined
May 8, 2016
Messages
4
Reaction score
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>
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Slideshow not working properly 2
Image not changing between "mute" & "un-mute" images. 5
CSS Grid inside slider not working... 1
Fading effect between play and play-over and pause and pause-over 0
Help with my responsive home page 2
Interfering CSS 1
How to stop an animated image from sticking to top of page? 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3

Members online

No members online now.
Total: 78 (members: 0, guests: 78)
Robots: 262

Forum statistics

Threads
473,981
Messages
2,570,188
Members
46,733
Latest member
LonaMonzon

Latest Threads

Top