<style>
.fadein {
    /*position:absolute;*/
    top:0px;
    /*width: 60%;
    margin: auto;*/
background: antiquewhite;

}
.fadein img {
    opacity: 0;
    position:absolute;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 30s;/*6s*/
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 30s;/*6s*/


    height: 220px;

}

@-webkit-keyframes fade {
  0% {opacity: 0;}
  10% {opacity: 0.1;}
  20% {opacity: 1;}
  30% {opacity: 1;}
  40% {opacity: 1;}
  50% {opacity: 1;}
  60% {opacity: 1;}
  80% {opacity: 1;}
  90% {opacity: 0.1;}
  100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    10% {opacity: 0.1;}
    20% {opacity: 1;}
    30% {opacity: 1;}
    40% {opacity: 1;}
    50% {opacity: 1;}
    60% {opacity: 1;}
    80% {opacity: 1;}
    90% {opacity: 0.1;}
    100% {opacity: 0;}
}

#f2 {
    animation-delay: 15s;/*3s*/
}
.NOfadein{
    width: 100%;
    text-align: center;
}
.NOfadein img{
  /*float: left;*/
  height: 220px;
  margin-left: 4px;
  margin-right: 4px;
  margin-bottom: 4px;
  margin-top: 4px;
}

.NOfadein2 img:hover {
  opacity:0.1;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.sfumato {
  position: relative;
  margin: 0 auto;
}

.sfumato, .sfumato img {
  width: 500px;
  height: 220px;
}

.sfumato img {
  border: 15px solid #ffe;
  -webkit-box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);
}
.sfumato img:nth-child(2) {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: 1s opacity ease-out;
  -moz-transition: 1s opacity ease-out;
  -o-transition: 1s opacity ease-out;
  transition: 1s opacity ease-out;
}
.sfumato img:nth-child(2):hover {
  opacity: 0;
}

</style>
