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
“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.
