Joomla Templates Club 406,261 posts

[angeldust Friend angeldustJoin date: January 2013Posts: 5Downloads:0Uploads:1]

#192081

Hi there, I would like to turn off the pop that appears over the image when u mouse over it (the title/description)

Please see link:

http://upmarketumhlanga.co.za/

Thank you

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#512092

I’m sorry for being late on this thread. It seems that you turned off the animation yourself of Image content type item. In general, you can turn off those effects by overriding the transform effect with below css styles:

/*Hide that animation effect on Fixel item grid*/
.fixel-grid .items.image.none article:hover .pull-left.item-image,
.fixel-grid .items.image.none article:hover .pull-right.item-image,
.fixel-grid .items.image.none article:hover img,
.fixel-grid .items.image.none article:focus .pull-left.item-image,
.fixel-grid .items.image.none article:focus .pull-right.item-image,
.fixel-grid .items.image.none article:focus img,
.fixel-grid .items.image.none article:active .pull-left.item-image,
.fixel-grid .items.image.none article:active .pull-right.item-image,
.fixel-grid .items.image.none article:active img {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}

.fixel-grid .items.image.none article:hover .item-desc {
opacity: 0;
}

.fixel-grid .items.image.rotateY:hover .front {
-webkit-transform: none;
-moz-transform: none;
transform: none);
}
.fixel-grid .items.image.rotateY:hover .back {
-moz-transform: none;
-webkit-transform: none;
transform: none;
}

.fixel-grid .items.image.rotateX article .back h2 a:after {
-webkit-transition: all 0s ease 0s;
-moz-transition: all 0s ease 0s;
-o-transition: all 0s ease 0s;
transition: all 0s ease 0s;
}

.fixel-grid .items.image.rotateY article .back h2 a:after {
-webkit-transition: all 0s ease 0s;
-moz-transition: all 0s ease 0s;
-o-transition: all 0s ease 0s;
transition: all 0s ease 0s;
}

.fixel-grid .items.image.rotateY article .back {
-moz-transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}

.fixel-grid .items.image.rotateX article .back {
-moz-transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}

You can create a custom.css file and put these codes into this file.

1 user says Thank You to phong nam for this useful post

1. swemmel

[Author]

Posts