[Resolvido] Posicionamento de div sobre Slideshow
Bom Dia!
Tenho a seguinte página
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slider</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="_css/aos.css">
<link rel="stylesheet" type="text/css" href="_css/jquery.cycle2.css">
<script type="text/javascript" src="_js/jquery.js"></script>
<script type="text/javascript" src="_js/jquery.cycle2.min.js"></script>
<style>
@import url('http://fonts.googleapis.com/css?family=Open+Sans');* {
font-family: 'Open Sans';
margin: 0;
padding: 0;
box-sizing: content-box;
}img {
border: 0;
max-width: 100%;
}ul {
list-style: none;
}ul li {
display: inline;
}
.aos-all {
width: 1000px;
max-width: 98%;
margin: 10vh auto 0 auto;
}
.aos-item {
display: inline-block;
float: left;
width: 40%;
height: 300px;
padding: 20px;
}
.aos-item__inner {
position: relative;
width: 100%;
height: 100%;
float: left;
background: #1da4e2;
line-height: 260px;
text-align: center;
color: #fff;
}@media screen and (max-width: 800px) {
.aos-item {
width: 50%;
}
}
.logo {
width : 432px;
-webkit-animation : logo-anim 1s;
-moz-animation : logo-anim 1s;
-o-animation : logo-anim 1s;
animation : logo-anim 1s;
}
@-webkit-keyframes logo-anim {
0% {
opacity : 0;
transform : translateY(-50px);
-webkit-transform : translateY(-50px);
-moz-transform : translateY(-50px);
-o-transform : translateY(-50px);
-ms-transform : translateY(-50px);
}
100% {
opacity : 1;
transform : translateY(0px);
-webkit-transform : translateY(0px);
-moz-transform : translateY(0px);
-o-transform : translateY(0px);
-ms-transform : translateY(0px);
}
}
@-moz-keyframes logo-anim {
0% {
opacity : 0;
transform : translateY(-50px);
-webkit-transform : translateY(-50px);
-moz-transform : translateY(-50px);
-o-transform : translateY(-50px);
-ms-transform : translateY(-50px);
}
100% {
opacity : 1;
transform : translateY(0px);
-webkit-transform : translateY(0px);
-moz-transform : translateY(0px);
-o-transform : translateY(0px);
-ms-transform : translateY(0px);
}
}
@-o-keyframes logo-anim {
0% {
opacity : 0;
transform : translateY(-50px);
-webkit-transform : translateY(-50px);
-moz-transform : translateY(-50px);
-o-transform : translateY(-50px);
-ms-transform : translateY(-50px);
}
100% {
opacity : 1;
transform : translateY(0px);
-webkit-transform : translateY(0px);
-moz-transform : translateY(0px);
-o-transform : translateY(0px);
-ms-transform : translateY(0px);
}
}
@keyframes logo-anim {
0% {
opacity : 0;
transform : translateY(-50px);
-webkit-transform : translateY(-50px);
-moz-transform : translateY(-50px);
-o-transform : translateY(-50px);
-ms-transform : translateY(-50px);
}
100% {
opacity : 1;
transform : translateY(0px);
-webkit-transform : translateY(0px);
-moz-transform : translateY(0px);
-o-transform : translateY(0px);
-ms-transform : translateY(0px);
}
}
.logo-atividades {
position : absolute;
top : 0;
center : 0;
width : 100%;
height : 500px;
text-align : center;
overflow : hidden;
z-index : 20;
}
.atividades {
color : #FFF;
height : 115px;
overflow : hidden;
position : absolute;
top : 80%;
margin-top : -176px;
width : 100%;
pointer-events : none;
text-align : center;
z-index : 10;
}.atividades a {
text-decoration : none;
}.atividades ul {
list-style : none;
padding : 0;
margin : 10px 0 0;
position : relative;
height : 100px;
font-size : 36px;
font-weight : 300;
text-align : center;
font-family : 'Lato', sans-serif;
letter-spacing : 5px;
text-transform : uppercase;
z-index : 100;
}.atividades ul li {
width : 100%;
text-align : center;
position : absolute;
opacity : 0;
top : 85px;
line-height : 100px;
-webkit-transition : all 0.5s ease-in-out;
-moz-transition : all 0.5s ease-in-out;
-o-transition : all 0.5s ease-in-out;
transition : all 0.5s ease-in-out;
transition-timing-function : ease;
-webkit-transition-timing-function : ease; /* Safari and Chrome */
}.atividades ul li.ativa {
opacity : 1;
top : 0;
-webkit-transition : all 1s ease-in-out;
-moz-transition : all 1s ease-in-out;
-o-transition : all 1s ease-in-out;
transition : all 1s ease-in-out;
transition-timing-function : ease;
-webkit-transition-timing-function : ease; /* Safari and Chrome */
}
}
</style>
</head>
<body>
<div class="cycle-slideshow"
data-cycle-fx=fadeout
data-cycle-timeout=5000
data-cycle-pause-on-hover="true"
data-cycle-slides="div.slide">
<div class="logo-atividades">
<div style="margin-top: 100px;">
<a href="http://www.funerariasaopedro.net.br">
<img class="logo" src="_img/logoFuneraria.png" alt="Logo"/>
</a>
<div class="atividades">
<ul>
<li class="ativa">Agência Funerária</li>
<li>Funerais</li>
<li>Cremações</li>
<li>Trasladações</li>
<li>Tanatopraxias</li>
<li>Exumações</li>
<li>Artigos Religiosos</li>
<li>Atendimento 24h</li>
</ul>
</div>
</div>
</div>
<!-- prev/next links -->
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<div class="cycle-pager"></div>
<div class="slide"> <img src="_img/_banner/_site/1.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/2.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/3.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/4.png" /> </div>
</div>
<div class="aos-item" data-aos="fade-right">
<div class="aos-item__inner">
<h3>Esquerda</h3>
</div>
</div>
<div class="aos-item" data-aos="fade-left">
<div class="aos-item__inner">
<h3>Direita</h3>
</div>
</div>
<div class="aos-item" data-aos="fade-up">
<div class="aos-item__inner">
<h3>Baixo Cima</h3>
</div>
</div>
<div class="aos-item" data-aos="fade-down">
<div class="aos-item__inner">
<h3>Cima Baixo</h3>
</div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner">
<h3>Baixo Cima</h3>
</div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner">
<h3>Cima Baixo</h3>
</div>
</div>
<script>
function homeTitleAnimation(){
var interval;
var counter = 1;
var myFunc = function() {
var cur = $('.atividades ul li').length;
if(cur == counter) {
$('.atividades ul li.ativa').removeClass('ativa');
$('.atividades ul li').first().addClass('ativa');
counter = 1;
} else {
counter++;
$('.atividades ul li.ativa').removeClass('ativa').next().addClass('ativa');
}
};
interval = setInterval(myFunc, 4000);
}
homeTitleAnimation();
</script>
<script src="_js/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-out-sine'
});
</script>
</body>
</html>
Tudo funciona corretamente com exceção do *posicionamento *da **logo** e da **ul** que rodam sobre o **Slideshow** que não estou conseguindo posiciona-los sobre o **Slideshow**.
<div class="cycle-slideshow"
data-cycle-fx=fadeout
data-cycle-timeout=5000
data-cycle-pause-on-hover="true"
data-cycle-slides="div.slide">
<div class="logo-atividades">
<div style="margin-top: 100px;">
<a href="http://www.funerariasaopedro.net.br">
<img class="logo" src="_img/logoFuneraria.png" alt="Logo"/>
</a>
<div class="atividades">
<ul>
<li class="ativa">Agência Funerária</li>
<li>Funerais</li>
<li>Cremações</li>
<li>Trasladações</li>
<li>Tanatopraxias</li>
<li>Exumações</li>
<li>Artigos Religiosos</li>
<li>Atendimento 24h</li>
</ul>
</div>
</div>
</div>
<!-- prev/next links -->
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<div class="cycle-pager"></div>
<div class="slide"> <img src="_img/_banner/_site/1.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/2.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/3.png" /> </div>
<div class="slide"> <img src="_img/_banner/_site/4.png" /> </div>
</div>
Onde estou errando?
Esse código pode ser visto em :
[http://funerariasaopedro.net.br/novo/](http://funerariasaopedro.net.br/novo/)
Na página, se derem um ***ctr+a, ***poderão notar no canto direito e abaixo do slide, a **ul** rodando normalmente. Porém a posição correta dela é no meio do slide e ao centro.
Com relação à *logomarca *que está escondida atrás do slide, sua posição é acima do **slide **e acima da **ul**Discussão (4)
Carregando comentários...