Size of thumbnails in album set is wrong

rod barbee · 2018-05-28 09:13:37

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

Markus · 2018-05-28 21:25:26

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???

rod barbee · 2018-05-28 22:46:39

Try changing this:

.albums figure :hover { 
    background-color: #f1f1f1;
	}

to this:

.albums figure:hover, .albums figure:hover figcaption { 
    background-color: #f1f1f1;
	}

Markus · 2018-05-29 01:48:08

rod barbee wrote:

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

rod barbee · 2018-05-29 02:22:27

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 barbee · 2018-05-29 02:45:53

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;
}

Markus · 2018-05-29 06:24:32

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

rod barbee · 2018-05-29 06:59:56

Try the css I posted in #31 above. I think you'll like that even better.

Markus · 2018-05-29 20:23:21

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

Daniel Leu · 2018-05-30 02:14:50

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

Markus · 2018-05-30 07:42:44

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

Daniel Leu · 2018-05-30 08:37:47

Markus wrote:

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!

Community @ The Turning Gate

#26 2018-05-28 09:13:37

Re: Size of thumbnails in album set is wrong

#27 2018-05-28 21:25:26

Re: Size of thumbnails in album set is wrong

#28 2018-05-28 22:46:39

Re: Size of thumbnails in album set is wrong

#29 2018-05-29 01:48:08

Re: Size of thumbnails in album set is wrong

#30 2018-05-29 02:22:27

Re: Size of thumbnails in album set is wrong

#31 2018-05-29 02:45:53

Re: Size of thumbnails in album set is wrong

#32 2018-05-29 06:24:32

Re: Size of thumbnails in album set is wrong

#33 2018-05-29 06:59:56

Re: Size of thumbnails in album set is wrong

#34 2018-05-29 20:23:21

Re: Size of thumbnails in album set is wrong

#35 2018-05-30 02:14:50

Re: Size of thumbnails in album set is wrong

#36 2018-05-30 07:42:44

Re: Size of thumbnails in album set is wrong

#37 2018-05-30 08:37:47

Re: Size of thumbnails in album set is wrong

Board footer