/* Image Hover Effects*/

#first-section {
  background-color: #4B77BE;
  display: inline;
  width: 100%;
  float: left;
}
#first-section .first-section-area {
  display: inline;
  float: left;
  width: 100%;
  text-align: center;
  padding: 150px 0;
}
#first-section .first-section-area span {
  color: #ccc;
  font-size: 18px;
}
#first-section .first-section-area h1 {
  color: #fff;
  font-size: 50px;
  letter-spacing: 1px;
  line-height: 50px;
  margin-top: 20px;
}


/*  only image hover */
.wpf-imgoverlay {
  background-color: #FFF;
  display: block;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 0 #555;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 1;
  filter: alpha(opacity=100);
}
.wpf-imgoverlay img {
  height: 100%;
  width: 100%;
}
.wpf-imgoverlay:hover .view-caption {
  opacity: 1;
  filter: alpha(opacity=100);
  background-color: rgba(0, 0, 0, 0.4);
}
.wpf-imgoverlay:hover .view-caption a {
  padding-top: 44.5%;
}
.wpf-imgoverlay .view-caption {
  background-color: rgba(34, 167, 240, 0);
  /* border: 10px solid #fff; */
  bottom: 0;
  color: #fff;
  left: 0;

  position: absolute;
  /* opacity: 0; */
  filter: alpha(opacity=0);
  right: 0;
  text-align: center;
  top: 0;
  z-index: 99;
  -webkit-transition: all 0.75s ease-in-out 0s;
  -moz-transition: all 0.75s ease-in-out 0s;
  -ms-transition: all 0.75s ease-in-out 0s;
  -o-transition: all 0.75s ease-in-out 0s;
  transition: all 0.75s ease-in-out 0s;
}
.wpf-imgoverlay .view-caption a {
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: bold;
  height: 100%;
  padding-top: 40.5%;
  -webkit-transition: all 0.75s ease-in-out 0s;
  -moz-transition: all 0.75s ease-in-out 0s;
  -ms-transition: all 0.75s ease-in-out 0s;
  -o-transition: all 0.75s ease-in-out 0s;
  transition: all 0.75s ease-in-out 0s;
}
 <style>


/* Image slide Hover  */
#tenth-section {
  background-color: #e67e22;
  display: inline;
  width: 100%;
  float: left;
}
#tenth-section .tenth-section-area {
  display: inline;
  float: left;
  width: 100%;
  text-align: center;
  padding: 150px 0;
}
#tenth-section .tenth-section-area h2 {
  color: #fff;
  margin-bottom: 40px;
}
#tenth-section .tenth-section-area .single-effect {
  display: inline-block;
  margin: 0 18px;
}
#tenth-section .tenth-section-area .single-effect h3 {
  color: #fff;
  font-size: 25px;
  margin-bottom: 20px;
}
#tenth-section .tenth-section-area .single-effect .hover {
  background-color: #FFF;
  color: #888;
}

/*  hover layout styles */
.wrapper {
  width: 1024px;
  margin: 0 auto;
}

.wrapp-inner {
  float: left;
  display: inline;
  width: 100%;
}

.wpf-img-hover {
  background-color: #none;
  display: block;
  max-width: 350px;
  max-height: 420px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 0 #555;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 1;
  filter: alpha(opacity=100);
}
.wpf-img-hover img {
  height: auto;
  width: 100%;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 1;
  filter: alpha(opacity=100);
}
.wpf-img-hover:hover img {
  transform: translateX(100%);
  opacity: 1;
  filter: alpha(opacity=100);
}
.wpf-img-hover .view-caption:hover img {
  transform: translateX(0%);
  opacity: 1;
  filter: alpha(opacity=100);
}
.wpf-img-hover:hover .view-caption {
  transform: translate3d(-0%, 0px, 0px);
}
.wpf-img-hover .view-caption {
  background-color: rgba(173, 42, 46, .8);
  bottom: 0;
  color:#fff;
  left: 0;
  position: absolute;
  right: 0;
  padding: 5% ;
  text-align: left;
  top: 0;
  z-index: 99;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  transform: translate3d(-110%, 0px, 0px);
}
.wpf-img-hover .view-caption h4 {
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 10px;
  padding-bottom: 5px;
  letter-spacing: 0.5px;
}
.wpf-img-hover .view-caption p {
  font-size: 15px;
  letter-spacing: 0.5px;
}
.loc-btn {
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background:rgba(186, 84, 87, .5);
  padding: 10px 20px 10px 20px;
  border: solid #bf5759 2px;
  text-decoration: none;
}

/*  Button styles */
.loc-btn:hover {
  background: #ffffff;
  text-decoration: none;
   color:rgba(186, 84, 87, .5);
}
#button-wrap-inner {    padding: 30px 0px;   text-align: center; }
.view-caption2 {padding-top:20%  !important;}
.view-caption2:hover {padding-top:24% !important;}
 p {    margin: 0; }

 /*  text on image styles */
 .imageblock {    position: relative;
   width: 100%; /* for IE 6 */
}

.txtblock {  color: #fff;  font-size: 16px;  left: 0;  max-width: 350px;  padding: 0 0 0 25px;  position: absolute;  top: 10px;
  width: 100%; }
.txtblock h3, .txtblock h5 {  color: #fff;  font-weight: 500;  margin: 10px 0;}