<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body {
background-image: url("bg.jpg");
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #000000;
margin-left:100px;
}
li {
float:left;
}
li a {
display: block;
color: white;
text-align: left;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #000000;
}
img {
position: absolute;
margin-top:10px;
border: 1px solid #ccc;
}
img img {
width: 100%;
height: auto;
}
img:nth-of-type(2){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
img:nth-of-type(3){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
img:nth-of-type(4){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
img:nth-of-type(5){
-webkit-animation: fadeInOut 15s linear 5s infinite;
}
#-webkit-keyframes fadeInOut{
0% { opacity:1; }
17% { opacity:1; }
25% { opacity:0; }
92% { opacity:0; }
100% { opacity:1; }
}
.image-wrapper {
position: relative;
height: 600px; // change to whatever works for you
}
.image {
position: absolute;
top: 50%;
border: 1px solid #ccc;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.container { width: 1000px; }
.logo {
float: left;
width: 100px;
height: 50px;
}
.nav {
float: right;
width: 880px;
}
</style>
<title>Badass Burgers</title>
</head>
<body style="height:1500px">
<img class="logo" src='logo.jpg'/>
<div class="container">
<ul class="nav">
<li><a class="active" href="homepage.php">Home</a></li>
<li>About</li>
<li>Team</li>
<li>Menu</li>
<li>Book A Table</li>
<li>Message Us</li>
</ul>
<div style="clear: both"></div>
</div>
<div class="image-wrapper">
<img class="image" src='food1.jpg' width="1400" height="600" />
<img class="image" src='Food2.jpg' width="1400" height="600" />
<img class="image" src='Food3.jpg' width="1400" height="600" />
<img class="image" src='Food4.jpg' width="1400" height="600" />
</div>
</body>
</html>
hi, i am trying to fade between these 4 images for a website. so far
so good, however im trying to alter this code. does anyone know how to
alter the code such that each image changes after 5 seconds please ?
any help is very appriciated
As litel says, the bootstrap carousel would be perfect for your example. W3 Schools have a good tutorial on Bootstrap here, which is what I used to build my first carousel.
But to answer your question in your present context, I think it would be much easier to do it with a short script rather than the CSS animations. I added the following code to the end of your document and that seemed to do what you were asking. Hope that helps.
<style>
.image-wrapper .image{
display: none; /*Hide the images to begin with*/
}
</style>
<script>
var currentImage = 0;
$(document).ready(function(){
imageChanger(); /*First image fades in on page ready*/
setInterval(imageChanger, 5000);}); /*set a timer of 5000ms for each subsequent image*/
function imageChanger(){
$('.image-wrapper img').eq(currentImage).fadeOut();
currentImage = (currentImage+1)%4;
$('.image-wrapper img').eq(currentImage).fadeIn();
}
</script>
Related
Am having some trouble with toggling a FAB from hamburger to x.
The FAB has one primary icon, & three secondary icons. Clicking the primary icon will toggle the secondary icons vertically, & it should also toggle the animation from hamburger to x at any click within the primary icon.
Currently, my code does not toggle the animation from hamburger to x if a user were to precisely click on either of the three hamburger lines.
I do hope someone is willing to help explain where I have gone wrong, coz it just feels so close but I'm not able to figure out where my mistake is.
Tutorial Credits:
Tran Anh Tuat
w3newbie
I am new to coding & my codes below are the combination of my efforts from studying tutorials from the above links. Will be grateful for any & all help. Thank you in advance!
let fabAnim = document.querySelector('.priFabWhite')
let fabItems = document.querySelectorAll('.secFabOrange')
showItems = () => {
fabItems.forEach((e, index) => {
e.style.bottom = `calc(${(index + 1.5) * 70}%)`
})
}
hideItems = () => {
fabItems.forEach(e => {
e.style.bottom = `20px`
})
}
/* Triggers click animation rotation of fabToggle button */
fabAnim.addEventListener('click', (e) => {
e.target.classList.toggle('active')
if (e.target.classList.contains('active')) {
showItems()
} else {
hideItems()
}
})
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body{
height: 100vh;
background-color: black;
position: relative;
}
.wrapper{
position: absolute;
display: grid;
place-items: center;
width: 100px;
height: 100px;
cursor: pointer;
right: 10px;
bottom: 50px;
}
.wrapper > button {
position: absolute;
outline:transparent;
border: transparent;
cursor: pointer;
}
.secFabOrange{
background-color: rgb(209, 84, 0);
width: 50px;
height: 50px;
font-size: 25px;
transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
display: grid;
place-items: center;
border-radius: 30px;
color: white;
}
.secFabOrange > i{
transition: 0.6s ease-in-out;
}
.priFabWhite {
background-color:white;
width: 70px;
height: 70px;
position: absolute;
border-radius: 50px
}
.line{
position: absolute;
right:25%;
height:6px;
width: 50%;
border-radius: 8px;
transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}
.topGreen{
top:25%;
background: green;
}
.middleRed{
top: 47%;
background: red;
}
.bottomBlue{
bottom: 25%;
background: blue;
}
.priFabWhite.active .topGreen{
transform: rotate(45deg);
top:45%;
}
.priFabWhite.active .middleRed{
transform: rotate(-45deg);
top: 45%;
}
.priFabWhite.active .bottomBlue{
transform: rotate(-45deg);
top: 45%;
}
/* START popup style */
.popup {
position: absolute;
top:50%;
left:40%;
transform: translate(-50%, -50%);
width:70%;
height:90%;
padding:30px 20px;
background:#f5f5f5;
border-radius:10px;
box-sizing:border-box;
z-index:2;
text-align:justified;
}
.popup .title {
margin:5px 0px;
font-size:24px;
font-weight:600;
}
.popup .description{
color:#222;
font-size:16px;
padding:5px;
}
/* END popup style */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fab Toggle Anim</title>
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- START fab divs -->
<div class="wrapper">
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-exit'></i>
</button>
<button class="priFabWhite">
<span class="line topGreen"></span>
<span class="line middleRed"></span>
<span class="line bottomBlue"></span>
</button>
</div>
<!-- END fab divs -->
<!-- START popup divs -->
<div class="popup center">
<div class="title">
FAB Hamburger to X Animation
</div>
<br>
<div class="description">
<h3>Intention:</h3>
<ol>
<li>Anim1: Toggle <strong>secFabOrange</strong> from <strong>priFabWhite</strong> on click.</li>
<li>Anim2: Hamburger to x.
<li><mark>Anim3: Toggle Anim1 & Anim2 <strong>from any point within priFabWhite</strong> on click.</mark></li>
</ol>
<br>
<h3>Problem with Current Code:</h3>
<ul>
<li>For point 3, my code toggles Anim1 & Anim2 <strong>only when white portion of priFabWhite is clicked</strong></li>
<li>If user <strong>precisely clicks</strong> either of the three hamburger lines (green, red, blue), <strong>only Anim1 is triggered</strong>.</li>
</ul>
<br>
<h3>Tutorial Credits:</h3>
<ul>
<li>Tran Anh Tuat</li>
<li>w3newbie</li>
</ul>
</div>
<!-- END popup divs -->
<script src="scripts.js"></script>
</body>
</html>
Managed to find a solution for the problem. Added class avoid-clicks in html and css.
let fabAnim = document.querySelector('.priFabWhite')
let fabItems = document.querySelectorAll('.secFabOrange')
showItems = () => {
fabItems.forEach((e, index) => {
e.style.bottom = `calc(${(index + 1.5) * 70}%)`
})
}
hideItems = () => {
fabItems.forEach(e => {
e.style.bottom = `20px`
})
}
/* Triggers click animation rotation of fabToggle button */
fabAnim.addEventListener('click', (e) => {
e.target.classList.toggle('active')
if (e.target.classList.contains('active')) {
showItems()
} else {
hideItems()
}
})
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body{
height: 100vh;
background-color: black;
position: relative;
}
.wrapper{
position: absolute;
display: grid;
place-items: center;
width: 100px;
height: 100px;
cursor: pointer;
right: 10px;
bottom: 50px;
}
.wrapper > button {
position: absolute;
outline:transparent;
border: transparent;
cursor: pointer;
}
.secFabOrange{
background-color: rgb(209, 84, 0);
width: 50px;
height: 50px;
font-size: 25px;
transition: 0.6s cubic-bezier(0.77, 0, 0.175, 1);
display: grid;
place-items: center;
border-radius: 30px;
color: white;
}
.secFabOrange > i{
transition: 0.6s ease-in-out;
}
.priFabWhite {
background-color:white;
width: 70px;
height: 70px;
position: absolute;
border-radius: 50px
}
.line{
position: absolute;
right:25%;
height:6px;
width: 50%;
border-radius: 8px;
transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}
.topGreen{
top:25%;
background: green;
}
.middleRed{
top: 47%;
background: red;
}
.bottomBlue{
bottom: 25%;
background: blue;
}
.priFabWhite.active .topGreen{
transform: rotate(45deg);
top:45%;
}
.priFabWhite.active .middleRed{
transform: rotate(-45deg);
top: 45%;
}
.priFabWhite.active .bottomBlue{
transform: rotate(-45deg);
top: 45%;
}
/* START popup style */
.popup {
position: absolute;
top:50%;
left:40%;
transform: translate(-50%, -50%);
width:70%;
height:90%;
padding:30px 20px;
background:#f5f5f5;
border-radius:10px;
box-sizing:border-box;
z-index:2;
text-align:justified;
}
.popup .title {
margin:5px 0px;
font-size:24px;
font-weight:600;
}
.popup .description{
color:#222;
font-size:16px;
padding:5px;
}
/* END popup style */
.avoid-clicks {
pointer-events: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fab Toggle Anim</title>
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- START fab divs -->
<div class="wrapper">
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-trip'></i>
</button>
<button class="secFabOrange">
<i class='bx bx-exit'></i>
</button>
<button class="priFabWhite">
<span class="line topGreen avoid-clicks"></span>
<span class="line middleRed avoid-clicks"></span>
<span class="line bottomBlue avoid-clicks"></span>
</button>
</div>
<!-- END fab divs -->
<!-- START popup divs -->
<div class="popup center">
<div class="title">
FAB Hamburger to X Animation
</div>
<br>
<div class="description">
<h3>Solution:</h3>
<ol>
<li>HTML: Added <strong>avoid-clicks</strong> into each span class for priFabWhite button in lines 30-32.</li>
<li>CSS: Defined <strong>avoid-clicks</strong> in lines 123-125.
</ol>
<br>
<br>
<h3>Tutorial Credits:</h3>
<ul>
<li>Tran Anh Tuat</li>
<li>w3newbie</li>
</ul>
</div>
<!-- END popup divs -->
<script src="scripts.js"></script>
</body>
</html>
I am trying to create an jsp home page with slide show. I am using eclipse ide, JSP,CSS and JS. I am able to get the slide show everything works just fine but the height of the images in the slideshow are different i have given height as 60% for all images. But each image shows thier own original height. Can anyone guide what needs to be corrected. Below is the code.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next {
font-size: 11px
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="kn">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
</header>
<div class="divider"></div>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="images/1.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/2.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/3.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/4.jpg" height="50%" width="100%">
</div>
<div class="mySlides fade">
<img src="images/5.jpg" height="50%" width="100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
<script src="js/home.js"></script>
</body>
</html>
welcome to SO,
you need to define height for your container of slideshow in your case it is slideshow-container so in css,
.slideshow-container{
height:300px;
}
this should do the trick.!, hope this helps.
I am using animate.css in order to animate text on page load. I am delaying the effects but it is showing the text then animating it see?
You can see the animation in action here: https://gyazo.com/a51b4248203c72cbf81012e7f7fad112.
If you need to closer to my HTML & CSS: https://hastebin.com/dawawecuvi.xml
#import url('https://fonts.googleapis.com/css?family=Pacifico');
.logotext{
color: limegreen;
font-size: 34px;
font-family: 'Pacifico', cursive;
}
.navbar-default{
background-color: dimgrey !important;
box-shadow: 0px 5px 0px limegreen !important;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: white !important;
}
li{
font-size: 20px;
}
.navbar-right{
padding-right: 80px;
}
.hvr-sweep-to-top:before {
background: limegreen ;
}
.container-fluid {
padding: 0px;
}
.aboutmediv{
background-color: black;
height: 900px;
}
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
}
.navbar-fixed-top{
animation: slideInDown 1s;
animation-delay: 0.1s;
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Nydigov">
<meta name="description" content="Nydigovs portfolio site. Check out my recent work!">
<meta name="keywords" content="Fellex,Nydigov,NY,nydigov,fellex,fell,fellex.me,Fellex.me">
<link rel="shortcut icon" href="img/athyslogo.png">
<title>Nydigov</title>
<!--All links secure-->
<!--Latest compiled and minified CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--Secure link to paper bootstrap theme -->
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css" integrity="sha384-I3UMl9KZhtYWd8htMkmvi+cG4KsfRMyoiX7O3teTUiqrP+34X3fuqYI5GUOC0N82" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--Animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous">
<!--FontAwesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!--Hover CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover-min.css" integrity="sha384-VTeRBIyCP1UOtJsYqkdWx9FnCcVTZlBzNKjt0R0FMPZUVvNmz2bflo5bg7kbZDU1" crossorigin="anonymous">
<!--Main Stylesheet-->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><p class="logotext">Nydigov</p></a>
</div>
<ul class="nav navbar-nav pull-right navbar-right">
<li class="hvr-sweep-to-top">Home</li>
<li class="hvr-sweep-to-top">Past Work</li>
<li class="hvr-sweep-to-top">Contact</li>
</ul>
</div>
</nav>
<!--Content-->
<div class="container-fluid">
<!--Image-->
<div class="image">
<img src="images/imagebacktop.jpg" alt="" class="img-responsive mainimg">
<h2 class="imagetextbig">Hi, I'm Nydigov</h2>
<h2 class="imagetextbig imgtext2">And this is my site</h2>
</div>
<!--About Me-->
<div class="aboutmediv"></div>
</div>
</body>
</html>
Looking at your CSS, I presume these are the two elements we're talking about:
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
}
If you want them hidden at first and then to slide in from the sides of the page, you have two options. The first option is to change the CSS so they start off-screen and animate on-screen. But there isn't a plug-and-play solution for that where you can just use the animate.css animation out of the box and have it work.
So we can do the second option, which is to hide them as the page is loaded, then have them appear when the animation starts. Use visibility: hidden in your default styles for the elements to hide them when the page first loads.
.imagetextbig {
position: absolute;
top: 240px;
width: 100%;
color: goldenrod;
font-size: 90px;
text-align: center;
animation: slideInLeft 1s;
animation-delay: 0.9s;
visibility: hidden; /*add this*/
}
.imgtext2{
margin-top: 100px;
animation: slideInRight 1s;
animation-delay: 0.9s;
visibility: hidden; /*add this*/
}
Then, in the animation, we want to make sure they switch to visibility: visible, otherwise you'll be animating an invisible element.
If we go to the animate.css website and check their source code, we can see that the animation for slideInLeft looks like this:
#keyframes slideInLeft {
0% {
transform: translate3d(-100%,0,0);
visibility: visible;
}
to {
transform: translateZ(0);
}
}
In other words, setting the elements to visible at the start of the animation is already taken care of for you. So just adding visibility: hidden to the default styles at the start is all you need. The slideInRight animation is similar to the slideInLeft one: it also sets visibility: visible at its start. So nothing to worry about there either.
I am making a responsive website as part of a project for school. I am trying to use CSS3 animations to transition an art gallery from one painting to the next. The transitions are working but for the life of me I can't get the images to center in the slide-frame.
I tried to look on here to see if there was a solution to this but couldn't find one that I could get to work.
Thanks for your help.
HTML
<div id="image-slider">
<div id="navigation">
1
2
3
4
5
6
7
</div>
<div id="slide-frame">
<img class="center" src="images/explorations/Bound.jpg" alt="" />
<div id="slides">
<img id="slide1" class="center" src="images/explorations/Bound.jpg" alt="" />
<img id="slide2" class="center" src="images/explorations/Cleave.jpg" alt="" />
<img id="slide3" class="center" src="images/explorations/forLoveofGodandCountry.jpg" alt="" />
<img id="slide4" class="center" src="images/explorations/unknownCorrosive.jpg" alt="" />
<img id="slide5" class="center" src="images/explorations/Untitled1.jpg" alt="" />
<img id="slide6" class="center" src="images/explorations/Untitled3.jpg" alt="" />
<img id="slide7" class="center" src="images/explorations/Untitled4.jpg" alt="" />
</div>
</div>
</div>
CSS
#image-slider {
margin: 10px auto;
width: 100%;
}
#slide-frame {
height: 600px;
overflow: hidden;
margin: auto;
}
#slides {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
text-align: center;
}
.center{
margin: 0px auto;
display: block;
}
#slides img {
position: absolute;
top: 0;
margin: auto;
}
#navigation {
margin: 5px 0 0 0;
text-align: center;
z-index: 10px;
font-size: 2rem;
}
#navigation a {
text-decoration: none;
color: #373737;
display: inline-block;
}
#navigation a:hover {
color: #B6A084;
}
#slides img {
z-index: 1;
opacity: 0;
/* animation */
transition: all linear 400ms;
-o-transition: all linear 400ms;
-moz-transition: all linear 400ms;
-webkit-transition: all linear 400ms;
}
#slides img:target {
left: 0;
z-index: 5;
opacity: 1;
}
http://codepen.io/maxwbailey/pen/loezq
The problem is the position:absolute that you have on the image, simply take that off and add display:block; margin:auto; and you'r good to go! Here's a demo.
I'm attempting to create a website like this http://www.spookycraft.net/ and whenever I run my site in IE it looks terrible everything is pushed to the left and all of the images are separated, Tho in Chrome and firefox they look perfect (as in all centered and the transition is there) here's the fiddle
http://jsfiddle.net/EuRJE/
Here's the testing site: http://www.wandernetwork.com/
and here's the code:
also keep in mind i'm somewhat novice so if you have any pointers for me or additional tips they would be greatly appreciated.
<head>
<meta charset='UTF-8'>
<title>Wandercraft Network</title>
<style media="screen" type="text/css">
#page-wrap {
width:620px;
margin:0px auto;
}
.slide-up-boxes a {
display:block;
width:300px;
height:300px;
background: #eee;
overflow:hidden;
}
.slide-up-boxes h5 {
height:300px;
width:300px;
text-align:center;
line-height:150px;
-webkit-transition: margin-top 0.3s linear;
background-color:#white;
}
.slide-up-boxes a:hover h5 {
margin-top:-300px;
}
.slide-up-boxes div {
text-align:center;
height:300px;
width:300px;
opacity:0;
background-color:orange;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.2s linear;
}
.slide-up-boxes a:hover div {
-webkit-transform: rotate(0);
opacity:1;
}
.slide-up-boxes {
margin:5px;
width:300px;
float:left;
}
.banner {
margin:0px auto;
display:block;
padding:15px;
width:1000px;
height:300px;
}
/* Limit the width of the tray to 30px to make it stack vertically*/
#enjin-tray {
max-width: 30px;
margin: 0;
bottom: 175px;
}
#enjin-tray li#notificationpanel {
border-radius: 3px;
}
#enjin-tray ul li.tray-item {
border-style: solid;
border-width: 1px;
}
#notificationpanel .notification-icon.apps {
background-position: -84px 3px;
}
#notificationpanel .notification-icon.general {
background-position: -54px 3px;
}
#notificationpanel .notification-icon.messages {
background-position: -25px 3px;
}
#notificationpanel .notification-icon.dashboard {
display: none;
}
#enjin-tray li#notificationpanel .subpanel {
width: 380px;
bottom: 0;
}
#enjin-tray #notificationpanel .subpanel.general {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.messages {
right: 40px;
}
#enjin-tray .subpanel {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.apps .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.general .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.messages .faux-icon {
display: none;
}
#messages-notification-tip {
bottom: 231px !important;
right: 35px !important;
}
#general-notification-tip {
bottom: 205px !important;
right: 35px !important;
}
#apps-notification-tip {
bottom: 180px !important;
right: 35px !important;
}
.triangle {
display: none;
}
#enjin-tray-messaging {
display: none;
}
</style>
</head>
<body>
<img src="https://dl.dropboxusercontent.com/u/85261154/WN_Banner.png" border="0px" class="banner">
<div id="page-wrap">
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<div style="clear:both;"></div>
</div>
</body>
Any help would be appreciated if I find the answer I'll be sure to update this post, Thank you for reading.
What version of IE are you using? Your page looks fine on IE10.
I can't help you if you are running an older version, but have a look at this :
Imitate CSS3 transition in IE?
-webkit-transition won't work on IE.