actually facing huge problem in animation on ios mobile devices here link : https://www.hopeeg.com/pages/why_us here code block
.facilities .cont { text-align: center; position: relative; overflow: hidden; } .facilities .cont .title-withouthover { position: absolute; top: 20px; right: 0; z-index: 1; background: rgba(0, 0, 0, 0.7); color: white; padding: 10px; transition: 200ms; font-size: 12px; } .facilities .cont .cont-img { margin-bottom: 0px; } .facilities .cont .cont-img img { width: 100%; height: 100%; } .facilities .cont .cont-txt { width: 100%; height: 100%; } .facilities .cont .cont-txt p { font-size: 16px; line-height: 21px; font-weight: bold; margin-bottom: 10px; } .facilities .cont .cont-txt .read-more { font-size: 12px; } .facilities .cont:hover .title-withouthover { right: -100%; } .facilities [class^='imghvr-'], .facilities [class*=' imghvr-'] { position: relative; display: block; margin: 0px; max-width: 100%; background-color: #2266a5; color: #fff; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transform: translatez(0); transform: translatez(0); width: 100%; height: 100%; } .facilities [class^='imghvr-'] > img, .facilities [class*=' imghvr-'] > img { vertical-align: top; max-width: 100%; } .facilities [class^='imghvr-'] figcaption, .facilities [class*=' imghvr-'] figcaption { background-color: rgba(0,0,0,0.7); position: absolute; padding: 30px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffff !important; } .facilities [class^='imghvr-'] figcaption h1, .facilities [class^='imghvr-'] figcaption h2, .facilities [class^='imghvr-'] figcaption h3, .facilities [class^='imghvr-'] figcaption h4, .facilities [class^='imghvr-'] figcaption h5, .facilities [class^='imghvr-'] figcaption h6, .facilities [class*=' imghvr-'] figcaption h1, .facilities [class*=' imghvr-'] figcaption h2, .facilities [class*=' imghvr-'] figcaption h3, .facilities [class*=' imghvr-'] figcaption h4, .facilities [class*=' imghvr-'] figcaption h5, .facilities [class*=' imghvr-'] figcaption h6 { color: #ffffff !important; } .facilities [class^='imghvr-'], .facilities [class*=' imghvr-'], .facilities [class^='imghvr-']:before, .facilities [class^='imghvr-']:after, .facilities [class*=' imghvr-']:before, .facilities [class*=' imghvr-']:after, .facilities [class^='imghvr-'] *, .facilities [class*=' imghvr-'] *, .facilities [class^='imghvr-'] *:before, .facilities [class^='imghvr-'] *:after, .facilities [class*=' imghvr-'] *:before, .facilities [class*=' imghvr-'] *:after { box-sizing: border-box; -webkit-transition: 0.35s ease; transition: 0.35s ease; } /* imghvr-circle-* ----------------------------- */ .facilities [class^='imghvr-circle-']:before, .facilities [class*=' imghvr-circle-']:before { position: absolute; top: -25%; bottom: -25%; left: -25%; right: -25%; content: ''; background-color: rgba(0,0,0,0.7); border-radius: 50%; -webkit-transition: 0.35s linear; transition: 0.35s linear; } .facilities [class^='imghvr-circle-'] figcaption, .facilities [class*=' imghvr-circle-'] figcaption { opacity: 0; background-color: transparent; } .facilities [class^='imghvr-circle-']:hover:before, .facilities [class*=' imghvr-circle-']:hover:before , .facilities [class^='imghvr-circle-']:focus:before, .facilities [class*=' imghvr-circle-']:focus:before { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .facilities [class^='imghvr-circle-']:hover figcaption, .facilities [class*=' imghvr-circle-']:hover figcaption , .facilities [class^='imghvr-circle-']:focus figcaption, .facilities [class*=' imghvr-circle-']:focus figcaption { opacity: 1; -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } /* imghvr-circle-bottom-right ----------------------------- */ .facilities .imghvr-circle-bottom-right:before { -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%); }<div class="facilities"> <div class="cont"> <div class="title-withouthover"> اكبر نسب نجاح في الشرق الاوسط </div> <figure class="imghvr-circle-bottom-right"> <div class="cont-img"> <img class="img-responsive" src="https://www.hopeeg.com/public/images/why-us1.jpg" alt=""> </div> <figcaption> <div class="cont-txt"> <div class="centered-table"> <div class="center-elements"> <p> منذ 1999 ونحن نفخر بان لدينا اكبر نسب نجاح في الشرق الاوسط ، نحن نتميز بخبرات العاملين لدينا ففريقنا هو اقدم فريق متخصص عامل في المجال في العالم العربي في تخصصات المجتمعات العلاجيه ولذلك ستجد لدينا مالن تجده عند الاخرين . </p> <div class="read-more"> <a href="#"> مزيد من التفاصيل </a> </div> </div> </div> </div> </figcaption> </figure> </div> </div>please go on page : https://www.hopeeg.com/pages/why_us , click on block see animation
any appreciated.
Comments
Post a Comment