wt food animation issue

Home Forums Support wt food animation issue

Tagged: ,


Avatar

Hello,

I’m a beginner at creating websites. As at the support via email nobody is responding since one week, I try it this way.
I bought the template wt food pro standard edition:
http://demo.warptheme.com/joomla/wt_food/index.php
I managed to change the slider at the top at the page (via unite slider)
In the middle of the page there are three pictures with a very nice animation when I hoover them. Where can I find those animations?
If I copy that raw with the picture in the quick page, I can’t change the picture. Where is it located?
At the end I just wann recreate the same effect: rotating the picture within the picture, as a mask, without the whole picture is rotating (not sure I made it clear enough)
I hope someone can help me with this, would really appreciate it.

Thank you very much for your reply,
Estelle Wang


Brian

“I’m a beginner at creating websites. As at the support via email nobody is responding since one week, I try it this way.”
Next time please submit technical questions via our ticket system https://warptheme.com/member-area/ticket-system/
“In the middle of the page there are three pictures with a very nice animation when I hoover them. Where can I find those animations?”
They are css animation, here the full css transition

.gallery-section {
  position: relative;
}
.gallery-section .row {
  margin: 0px 5px;
}
.gallery-section .column {
  padding: 0px 5px;
}
.gallery-block {
  position: relative;
  margin-bottom: 24px;
}
.gallery-block .inner-box {
  position: relative;
  overflow: hidden;
}
.gallery-block .inner-box .image .overlay-layer {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
  background-color: rgba(0,0,0,0.8);
}
.gallery-block .inner-box:hover .image .overlay-layer {
  opacity: 1;
}
.gallery-block .inner-box:hover .image img {
  transform: scale(1.5,1.5) rotate(15deg);
  -webkit-transform: scale(1.5,1.5) rotate(10deg);
  -moz-transform: scale(1.5,1.5) rotate(10deg);
  -o-transform: scale(1.5,1.5) rotate(10deg);
}
.gallery-block .inner-box .image {
  position: relative;
}
.gallery-block .inner-box .image img {
  position: relative;
  width: 100%;
  display: block;
  -webkit-transition: all 800ms ease;
  -ms-transition: all 800ms ease;
  -o-transition: all 800ms ease;
  -moz-transition: all 800ms ease;
  transition: all 800ms ease;
}
.gallery-block .inner-box .image .content {
  position: absolute;
  left: 25px;
  top: 25px;
  z-index: 2;
}
.gallery-block .inner-box .image .content .text {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: 'Montserrat', sans-serif;
}
.gallery-block .inner-box .image .content .text a {
  color: #ffffff;
}

“If I copy that raw with the picture in the quick page, I can’t change the picture. Where is it located?”
Pictures are located at Joomla media folder (images), the full patch is joomla-root/images/warptheme/gallery/1.jpg
You can upload images to joomla-root/images/ then linking to the images

“At the end I just wann recreate the same effect: rotating the picture within the picture, as a mask, without the whole picture is rotating (not sure I made it clear enough)”
Could you please explain a little bit ?

You must be logged in to reply to this topic.