Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
if you want the thumbnail and the fig caption area to be affected when hovering over either, try this:
.albums figure:hover .thumbnail {
.....your css.....
}
.albums figure:hover figcaption {
....your css....
}
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
I don't know if I understand the question correctly
I want to have the effect for both when mousing over:
When I move the mouse over the thumbnail, the frame with 5px and color #f1f1f1f1 is displayed and the font of the figcaption changes from red to gray.
But the background color of the figcaption is not changed.
When I move the mouse over the figcaption, the color changes from red to grey, the background color changes from white to #f1f1f1, but no frame is displayed for the thumbnail.
I would like to have both effects at the same time, no matter if I move the mouse over the thumbnails or the figcaption.
I'm looking for the place where I can create this effect. .album's figure doesn't seem to be either.
The question is, can such an effect even work???
https://www.mc-photografie.de - Backlight 3
https://bl3.mc-photografie.de - Backlight 3 Testsite
http://backup.der-canonier.de - Backlight 2
Offline
Try changing this:
.albums figure :hover {
background-color: #f1f1f1;
}
to this:
.albums figure:hover, .albums figure:hover figcaption {
background-color: #f1f1f1;
}
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
.albums figure:hover, .albums figure:hover figcaption { background-color: #f1f1f1; }
Cool, this is how areas are combined. Now I have learned something again
When I move the mouse over the thumbnail, exactly the effect I wanted to achieve occurs.
Now I wonder why the same thing doesn't happen when I move the mouse over the figcaption? Only the figcaption changes but not the thumbnail.
Both areas are addressed. Or isn't that so?
https://www.mc-photografie.de - Backlight 3
https://bl3.mc-photografie.de - Backlight 3 Testsite
http://backup.der-canonier.de - Backlight 2
Offline
just apply the same reasoning to the thumbnail.
instead of this:
.thumbnail :hover {
color: #f1f1f1;
border: 5px solid;
}
use this:
figure:hover .thumbnail {
color: #f1f1f1;
border: 5px solid;
}
this will affect all thumbnails in album sets and albums. If you only want it to happen in album sets, then try:
.albums figure:hover .thumbnail {
color: #f1f1f1;
border: 5px solid;
}
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
You can also use transform and transition to make the thumbnail resizing look smoother (and you won't get that movement in the footer when hovering over the the thumbnail with the description).
try this instead for the thumbnails :
.albums figure:hover .thumbnail {
transform: scale(0.95, 0.95);
transition: all .5s ease-in-out;
}
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Hi Rod,
thank you very much for your help. The effect ist absolutly great!
<figure itemscope="" itemtype="http://schema.org/ImageObject">
<a href="https://pangolin.der-canonier.de/galleries/03-landschaft/">
<div class="thumbnail">
I have always searched with the Inspector at "<a href" for the hover effect. That's why nothing happened if I changed anything
https://www.mc-photografie.de - Backlight 3
https://bl3.mc-photografie.de - Backlight 3 Testsite
http://backup.der-canonier.de - Backlight 2
Offline
Try the css I posted in #31 above. I think you'll like that even better.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
I tested it already: really great
With the last post I just wanted to show you that I was looking in the wrong place to get the effect. That's why nothing happened
https://www.mc-photografie.de - Backlight 3
https://bl3.mc-photografie.de - Backlight 3 Testsite
http://backup.der-canonier.de - Backlight 2
Offline
But I would like the hover effect to be applied to both the thumbnails and the figure caption at the same time. No matter if I touch the thumbnails or the figure caption.
Currently only one or the other is happening.
Looks like you have solved it...
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Looks like you have solved it...
That's right, Daniel. However, I would not have been able to do this without Rod´s support. Thanks again, Rod. And you, too, of course.
Now a little fine-tuning on the album and then I can replace the old page with the Pangolin test page
https://www.mc-photografie.de - Backlight 3
https://bl3.mc-photografie.de - Backlight 3 Testsite
http://backup.der-canonier.de - Backlight 2
Offline
Daniel Leu wrote:Looks like you have solved it...
That's right, Daniel. However, I would not have been able to do this without Rod´s support. Thanks again, Rod. And you, too, of course.
Now a little fine-tuning on the album and then I can replace the old page with the Pangolin test page
Ahh... didn't notice that there was a second page to the thread! Looking nice now!
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline