San Francisco Card

index.html

<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">&#xE87E;</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">&#xE8AE;</i>
  </li>
  <li>
  <i class="material-icons">&#xE55B;</i>
  </li>
  <li><i class="material-icons">&#xE410;</i></li>
</ul>
  </div>
  </div>  

  </div>
  


</div>

San Francisco Card.markdown

San Francisco Card

-I add a Animations. -- Inspired By: https://dribbble.com/shots/2366695--1-San-Francisco

Forked from Dany Santos's Pen San Francisco Card.

A Pen by Peramanathan Sathyamoorthy on CodePen.

License.

script.js

/*
-------------------------------------
------------------------------------- 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);
 

style.css

* {   
  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);
  }
}

styles

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" />