Joomla Templates Club 406,261 posts

[kuschel Friend kuschelJoin date: February 2011Posts: 89Downloads:52Uploads:9 Thanks: 2 Thanked: 3 times in 1 posts]

#194455

Hello,

first of all, thank you for the nice template fixel. It is great.

I have one problem. The frontpage animation (Rotate) does not work on small devices. So the user doesn’t see what is behind the pictures. It looks like a gallery. So i thought, it is the best to show a caption like it is in the carousel.

I tried this already:

/*Make the caption of Images content type visible all time*/
.fixel-grid .items.image.none article .item-desc {
opacity: 1;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}

THis works, but i don’t want to loose the rotating effect. Is this possible somehow? To show the image-Caption (or article title) when the picture is shown as caption. ANd remove the caption at mouse-over and rotete.

Thank you very much for your answer.

I love Jomlart-Templates and T3. It is always the best.

Brigitte Kuschel

[Hayden A Friend Hayden AJoin date: April 2010Posts: 282Downloads:0Uploads:20 Thanked: 54 times in 53 posts]

#521270

@ kuschel,
<em>@kuschel 409317 wrote:</em><blockquote>To show the image-Caption (or article title) when the picture is shown as caption. ANd remove the caption at mouse-over and rotete.
</blockquote>

You need to create a new css file named ‘custom.css’ in templatesja_appoliocss directory

Then, add following CSS rule to this custom.css file:

[PHP].fixel-grid .items.image.rotateY article .back .article-intro {
display: none;
}

.fixel-grid .items.image.rotateY article .flipper .item-desc.back {
height: auto;
color: white
transform: none;
padding: 15px;
opacity: 0.6;
}

.fixel-grid .items.image.rotateY article:hover .flipper .item-desc.back {
-moz-transform: perspective(800px) rotateY(0);
-webkit-transform: perspective(800px) rotateY(0);
transform: perspective(800px) rotateY(0);
height: 100%;
padding: 40px;
opacity: 1;
}
.fixel-grid .items.image.rotateY article .back h2 {
text-align: left;
}

.fixel-grid .items.image.rotateY article:hover .back h2 {
text-align: center;
}

.fixel-grid .items.image.rotateY article .back h2 a:after {
background: none;
}[/PHP]

Hope it helps.

[Author]

Posts