I've created a CSS animated banner. You can view the result here. However, I'm facing an issue where adding a hyperlink to some of the pictures is causing the animation to mess up. The first picture has a href attribute, making it smaller and not fitting into the same length div as the others. Here is the HTML code:
<header class="mainheader">
<div>
<img class='photo' src="temp/temp/img/cut/camera.jpg" alt="camera"/>
<img class='photo' src="temp/temp/img/cut/girl.jpg" alt="asian student"/>
<img class='photo' src="temp/temp/img/cut/kids.jpg" alt="campus kids"/>
<img class='photo' src="temp/temp/img/cut/books.jpg" alt="books" onclick="javascript:location.href='http://www.flickr.com/photos/lemuelinchrist/2657001395/'" />
<img class='photo' src="temp/temp/img/cut/field.jpg" alt="cambridge" onclick="javascript:location.href='http://www.flickr.com/photos/ericatkins/7927420108/'" />
<img class='photo' src="temp/temp/img/cut/icl.jpg" alt="icl" onclick="javascript:location.href='http://www.flickr.com/photos/herry/2924207957/'" />
<img class='photo' src="temp/temp/img/cut/math.jpg" alt="math" onclick="javascript:location.href='http://www.flickr.com/photos/featheredtar/76976279/'"/>
<img class='photo' src="temp/temp/img/cut/student.jpg" alt="student" onclick="javascript:location.href='http://www.flickr.com/photos/merchau/8548057127/'"/>
<img class='photo' src="temp/temp/img/cut/ucl.jpg" alt="ucl" onclick="javascript:location.href='http://www.flickr.com/photos/stevecadman/371199372/'"/>
</div>
</header>
</body>
My CSS file, ypicstyle.css in the temp folder, is structured like this:
.mainheader div/*.container*/{
width: 100%;
height: 300px;
margin: 2% 0;
overflow:hidden;
border:0px solid;
border-top-color:#856036;
border-left-color:#5d4426;
border-bottom-color:black;
border-right-color:#5d4426;
position:relative;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.photo{
position:absolute;
width:100%;
height:auto;
-webkit-animation:round 36s infinite;
-moz-animation:round 36s infinite;
-ms-animation:round 36s infinite;
-o-animation:round 36s infinite;
animation:round 36s infinite;
opacity:0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
@keyframes round{
11.1%{opacity:1;}
22.2%{opacity:0;}
}
...
I'm trying to correctly format it here, but it's been challenging. Does anyone have suggestions on how I can add links to my pictures without affecting the CSS animation? Thank you for any help. :::edit::: Can someone point out what I'm doing wrong? It seems like the animation timing might be off, or there could be another issue. When I try the URL example, some pictures have links and some don't. However, when I click on any picture, it takes me to the link of the last one. Can someone please assist?