<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="cont_principal">
<div class="cont_text_img">
<div class="cont_img_back">
<img class='img_1' src="http://i0.wp.com/farm1.staticflickr.com/417/19827417914_da1c83bbe6_b.jpg?w=1060" alt="" />
<img class='img_2' src="http://i1.wp.com/farm1.staticflickr.com/530/19829170113_2b312c3ced_b.jpg?w=1060" alt="" /></div>
<div class="cont_text">
<h1>San Francisco</h1>
<p>San Francisco, officially the City and County of San Francisco, is the cultural, commercial, and financial center of Northern California and the only consolidated city-county in California. San Francisco encompasses a land area of about 46.9 square miles (121 km2) on the northern end of the San Francisco Peninsula, which makes it the smallest county in the state. </p>
<button class="btn_read_m">READ MORE</button>
<div class="cont_icon_like">
<p> <i class="material-icons"></i><span>288</span></p>
</div>
</div>
<div class="cont_img_frond">
<img class='img_1' src="http://i0.wp.com/farm1.staticflickr.com/417/19827417914_da1c83bbe6_b.jpg?w=1060" alt="" />
<img class='img_2' src="http://i1.wp.com/farm1.staticflickr.com/530/19829170113_2b312c3ced_b.jpg?w=1060" alt="" />
<div class="cont_icons_img_from">
<ul>
<li><i class="material-icons"></i>
</li>
<li>
<i class="material-icons"></i>
</li>
<li><i class="material-icons"></i></li>
</ul>
</div>
</div>
</div>
</div>
* {
margin:0px auto;
padding:0px;
text-aling:center;
}
.cont_principal {
position:absolute;
height: 100%;
width: 100%;
background-color: #90A4AE;
}
.cont_text_img {
position: relative;
top:50%;
margin-top:-175px;
width: 700px;
height: 350px;;
background-color:#fff;
box-shadow:0px 10px 25px -5px rgba(0,0,0,0.25);
}
.cont_text {
position:relative;
float: left;
width: 50%;
height:80%;
margin:5%;
text-align:justify;
}
.cont_text_img_act > .cont_text > * {
opacity:1;
left: 0px;
}
.cont_text > h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 100;
margin-bottom:20px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition-delay: 1.2s; /* Safari */
transition-delay: 1.2s;
opacity:0;
position: relative;
left: -50px;
}
.cont_text > p {
font-family: 'Open Sans', sans-serif;
font-size:14px;
margin-bottom:20px;
font-weight: 300;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition-delay: 1.4s; /* Safari */
transition-delay: 1.4s;
opacity:0;
position: relative;
left: -50px;
}
.cont_icon_like {
position:relative;
float:right;
width:70px;
margin-top:10px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition-delay: 1.5s; /* Safari */
transition-delay: 1.5s;
opacity:0;
position: relative;
left: -50px;
}
.cont_icon_like > p > i {
color:#999;
cursor:pointer;
}
.cont_icon_like > p > span {
font-family: 'Open Sans';
position: relative;
top:-5px;
left:5px;
color:#666;
}
.btn_read_m {
position:relative;
float: left;
padding:10px;
border:none;
background-color:#495FE9;
color:#fff;
margin:10px 0;
box-shadow:1px 2px 10px 0px rgba(0,0,0,0.3);
font-size:11px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transition-delay: 1.6s; /* Safari */
transition-delay: 1.6s;
opacity:0;
position: relative;
left: -50px;
}
.cont_img_frond {
position:relative;
float: left;
width: 35%;
background: #eee;
height:100%;
margin-right:5%;
overflow:hidden;
top:0;
}
.cont_img_frond_active {
padding: 25px 0px;
top:-25px;
box-shadow:1px 1px 20px 0px rgba(0,0,0,0.3);
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.cont_img_frond > img {
top:-25px;
position:relative;
left:-420px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.cont_img_back {
position:absolute;
width: 100%;
height: 100%;
overflow:hidden;
}
.cont_img_back > img {
top:-25px;
position:relative;
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
opacity:0.2;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.img_2{
opacity:0;
display:none;
}
.img_d_n {
display:none;
}
.img_d_b {
display:block;
-webkit-animation-name: escala_imagen; /* Chrome, Safari, Opera */
-webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
animation-name: escala_imagen;
animation-duration: 10s;
}
.cont_img_frond:hover >.cont_icons_img_from {
bottom:0px;
}
.cont_icons_img_from {
position:absolute;
bottom:-100px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f24f5a+0,ffffff+78&1+0,0+78 */
background: -moz-linear-gradient(bottom, rgba(242,79,90,0.5) 0%, rgba(255,255,255,0) 85%); /* FF3.6-15 */
background: -webkit-linear-gradient(bottom, rgba(242,79,90,0.5) 0%,rgba(255,255,255,0) 85%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(bottom, rgba(242,79,90,0.5) 0%,rgba(255,255,255,0) 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f24f5a', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
height: 70px;
width:100%;
}
.cont_icons_img_from > ul > li {
position:relative;
float:left;
width:33.33%;
}
.cont_icons_img_from > ul {
margin-top:20px;
}
.cont_icons_img_from > ul > li {
list-style:none;
}
.cont_icons_img_from > ul > li > i {
margin-left:20px;
text-align:center;
font-size:32px;
color:#fff;
cursor:pointer;
}
@-webkit-keyframes escala_imagen {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
}
@-o-keyframes identifier {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
}
@-moz-keyframes identifier {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
}
@keyframes identifier {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
}
/*
-------------------------------------
------------------------------------- The image changue every 10 Secons
-------------------------------------
-------------------------------------
*/
var Cont = 0;
function inic(){
if(Cont % 2 != 0){
document.querySelector('.img_1').style.opacity = '0';
document.querySelectorAll('.img_1')[1].style.opacity = '0';
setTimeout(function (){
document.querySelector('.img_1').className = 'img_1 img_d_n';
document.querySelectorAll('.img_1')[1].className = 'img_1 img_d_n';
document.querySelector('.img_2').className = 'img_2 img_d_b';
document.querySelectorAll('.img_2')[1].className = 'img_2 img_d_b';
},500);
setTimeout(function (){
document.querySelector('.img_2').style.opacity = '0.2';
document.querySelectorAll('.img_2')[1].style.opacity = '1';
},600);
Cont++;
}else{
document.querySelector('.img_2').style.opacity = '0';
document.querySelectorAll('.img_2')[1].style.opacity = '0';
setTimeout(function (){
document.querySelector('.img_2').className = 'img_2 img_d_n';
document.querySelectorAll('.img_2')[1].className = 'img_2 img_d_n';
document.querySelector('.img_1').className = 'img_1 img_d_b';
document.querySelectorAll('.img_1')[1].className = 'img_1 img_d_b';
},500);
setTimeout(function (){
document.querySelector('.img_1').style.opacity = '0.2';
document.querySelectorAll('.img_1')[1].style.opacity = '1';
},600);
Cont++;
} }
window.onload = function (){
inic(); document.querySelector('.cont_text_img').className = "cont_text_img cont_text_img_act";
setTimeout(function(){
document.querySelector('.cont_img_frond').className = "cont_img_frond cont_img_frond_active";
},1700);
}
setInterval(function(){ inic() }, 10000);
