Iconic thumbnail styling with CSS

pideja · 2018-02-23 00:59:29

This test site http://pideja.ca/luc/ is still in development. I am in the process of completing the French side. On the French side, the galleries, named "oeuvres", have four albums. The styling is iconic with titles in white and a hovering effect. I would have preferred an upward sliding panel, such as was possible in CE4, but I can live with these thumbnails for now.
The lingering issue is that the titles are not centered relative to the frame.
Any way to do this with CSS?
Here is the thumbnail section of the CSS I am using:

/* thumbnails */

.the__albumSet figure {
	position: relative;
	border-radius: 4px;
	box-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.5);
	height: 220px;
	width: 220px;
}

.the__albumSet figcaption {
	height: 1.5em;
	position: absolute; top: 200px;/* title position; higher number=lower position */
	border-top: 1px rgba(0,0,0); /* label color - black */
}

/* thumbnail title hover */

.albums a:hover p {
	color: rgb(255,255,255);
	font-weight: 500 ;
	font-size: 1.5em  ;
	font-style: italic;
	background-color: #DAC5AD;
	color:black;
} 


.album-title {
	font-family: font-family: 'Montserrat' ;
	line-height: 1em ;
	font-weight: 300 ;
	font-style: normal;
	text-align: center;	
	color: rgb(255,255,255) ;
}

rod barbee · 2018-02-23 01:29:35

The lingering issue is that the titles are not centered relative to the frame.
Any way to do this with CSS?

Have you tried setting the text-align to center in the template?
In the template, look under Thumbnail Grid > Album Info

rod barbee · 2018-02-23 01:38:26

I would have preferred an upward sliding panel, such as was possible in CE4, but I can live with these thumbnails for now.

Since you're already positioning the title within the thumbnail, you could try a css animation to make it move from a lower or hidden starting point upon hovering. (Warning: you could be heading down a rabbit hole )

pideja · 2018-02-23 03:28:48

I tried setting the text-align to center in the template, Thumbnail Grid > Album Info to no avail. The color in Thumbnail Grid > Album Info is set to rgb(206, 196, 182) (kinda beige) but it must be overridden by the CSS because the text is actually white.

As for the text position, I am only partially responsible. I was playing around with styling and lo & behold there it was: within the thumbnail. I would prefer the text to be without the thumbnail but I hesitate to push my luck.

As for the animation, my flimsy knowledge of coding (and my failing heart) would not support this endeavor at this time.

rod barbee · 2018-02-23 03:36:24

As for the text position, I am only partially responsible. I was playing around with styling and lo & behold there it was: within the thumbnail. I would prefer the text to be without the thumbnail but I hesitate to push my luck.

By default, the Iconic layout has text outside the thumbnail.
For example, this is an iconic album set: http://pangolin.barbeephoto.com/galleri … r-testing/

pideja · 2018-02-23 03:58:12

But I did indicate ICONIC in Backlight/Album Settings/Thumbnail Grid/Style. Might be overridden by the CSS?

By the way, and I know this is slightly off topic, is there a way to control the styling of the breadcrumbs?

Last edited by pideja (2018-02-23 04:01:08)

rod barbee · 2018-02-23 04:05:00

I removed your css in the inspector and the Titles appeared below the thumbnail. So something in your css is overriding things.

you can control the styling of the breadcrumbs with custom css. the main selector is ul.breadcrumbs. Use the inspector to scope out any of the more specific selectors you may need.

there are some basic settings in the page template in the Content Area control tab.

pideja · 2018-02-23 04:15:55

Indeed. But now the size of the thumbnails is somewhat overwhelming. And no hover effect. At least I know that the CSS is the culprit. Must find the error.

I lifted the breadcrumbs structure from the inspector and edited it:

/* breadcrumbs */

ul.breadcrumbs {
    font-size: 1.5rem;
    letter-spacing: 0.015em;
    line-height: 1.125rem;
    list-style: bold;
}

I also tried editing the CSS directly thru the inspector. In both cases, no change.

UPDATE: forgot to add the li as in "ul.breadcrumbs li"

Now works great. Thank you.

Last edited by pideja (2018-02-23 04:43:47)

rod barbee · 2018-02-23 06:36:39

the reason the css is not working is there's a missing close comment: */

at the end of this declaration. there needs to be */ after this: /* label color - black

.the__albumSet figcaption {
	height: 2em;
	position: absolute;
	text-align: center;
	color: white; 
	top: 200px; /* title position; higher number=lower position */
	border-top: 25px rgba(0,0,0); /* label color - black 
}

You can see these errors in the inspector. In this case, the selectors after that turned red when in the rest of the css they are blue.

pideja · 2018-02-25 01:31:07

Thanks for pointing out the missing */.
Still working on the thumbnail with a hovering effect. I have something installed (pideja.ca/luc/fr/oeuvres/) but I still would prefer the whole thumbnail to alter its state either dimming or some other image effect.
Starting to work a lot with the inspector in conjunction with the Backlight editor. It's a great help.
Focussing on the album set thumbnails, here is my revised code:

/* thumbnails */

.the__albumSet figure {
	position: relative;
	border-radius: 1px;
	box-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.5);
	height: 230px;
	width: 230px;
}

.the__albumSet figcaption {
	height: 2em;
	position: absolute;
	text-align: center;
	color: white; 
	top: 200px; /* title position; higher number=lower position */
	border-top: 25px rgba(0,0,0); /* label color - black */
}  
 

/* thumbnail title hover */

.albums a:hover p {
	font-weight: 500 ;
	font-size: 1.5em  ;
	font-style: italic;
	/*background-color: #DAC5AD;*/
	color:red; 
} 

.album-title {
	font-family: font-family: 'Montserrat' ;
	line-height: 1em ;
	font-weight: 300 ;
	font-style: normal;
	text-align: center;	
	color: white ;
}

This produces a white album title changing into a red album title upon hover. It's a start, but I now would like the whole thumbnail image to alter it's state. I have no idea how to do this.
I even tried to find where in CE4 are the settings for the thumbnails. They do not seem to be in the CSS file. I had a fine hovering effect here: https://lucnadeau.ca/en/galleries.php Looking into the galleries.php does not reveal (to me, at least) how the thumbnail hover effect is done. Unless this bit of JQuery code is some kind of indication:

<script>
	jQuery(function($){
		jQuery('.album').mosaic({
			animation: 'slide',
			anchor_x: 'bottom',
			anchor_y: 'left',
			hover_x: '0px',
			hover_y: '0px',
			opacity: 1,
			speed : 200
		});
	});
	</script>

I admit being slightly over my head here...

Any suggestions?

Last edited by pideja (2018-02-25 01:34:19)

rod barbee · 2018-02-25 01:46:11

What do you mean by the thumbnail altering its state? There are css properties, like “scale” or “filter” and transitions that might do what you want.

That snippet of jQuery may do what you want to, though you’ll probably need to change the target class of .album to whatever the correct selector for Backlight might be.

Any suggestions?

Get a good book on css. I really liked CSS:The Missing Manual.
Same with jQuery

pideja · 2018-02-28 04:05:09

Change my objective, the sliding thing is still somewhat out of reach for me. Now I'm just trying to have the thumbnails fade while hovering all the while the title changes color.

Got the title part ok but I think I'm missing something to indicate the image to fade.

Any suggestions?

/* thumbnails */
.the__albumSet figure {
	position: relative;
	border-radius: 1px;
	box-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.5);
	height: 230px;
	width: 230px;
}
/*  thumbnail image fade hover effect */

.the_albumSet figure :hover  
{
    opacity: .5;
}

{
    opacity: 1;
    
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out; 
    transition: opacity .3s ease-in-out;
}


.the__albumSet figcaption {
	height: 2em;
	position: absolute;
	text-align: center;
	color: white; 
	top: 200px; /* title position; higher number=lower position */
	border-top: 25px rgba(0,0,0); /* label color - black */
}  
/* thumbnail title hover */

.albums a:hover p {
    
	font-weight: 500 ;
	font-size: 1.5em  ;
	font-style: italic;
	/*background-color: #DAC5AD;*/
	color:red; 
} 
.album-title {
	font-family : 'Montserrat', sans-serif;
	line-height: 1em ;
	font-weight: 300 ;
	font-style: normal;
	text-align: center;	
	color: white ;
}

Last edited by pideja (2018-02-28 04:06:07)

rod barbee · 2018-02-28 04:19:41

you've got no selector here:

{
    opacity: 1;
    
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out; 
    transition: opacity .3s ease-in-out;
}

rod barbee · 2018-02-28 04:30:02

try:

.albums .thumbnail as the selector

something like this should do it:

.albums .thumbnail {    
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out; 
    transition: opacity .3s ease-in-out;
}

.albums .thumbnail:hover {
    opacity: .3;
}

more on css transitions here: https://www.w3schools.com/css/css3_transitions.asp

pideja · 2018-03-02 00:12:28

Works fine but I had already a different CSS code:

/* thumbnails */
.the__albumSet figure {
	position: relative;
	border-radius: 1px;
	box-shadow: 4px 4px 4px rgba( 0, 0, 0, 0.5);
	height: 250px;
	width: 250px;
}
/*  thumbnail border hover effect */
.the__albumSet figure {
  padding: 1rem 1.3rem;
  border: 2px solid rgb(196, 159, 98);
  background: transparent;
  font-size: 0.6rem;
  border-radius: 2px;
}
.the__albumSet figure:hover {
  cursor: pointer;
  background: rgb(206, 196, 182);
  color: black;
}

/* thumbnail title hover */
  .albums figcaption   {
    font-family : 'Montserrat', sans-serif;
    color: white;
    font-size: 0.5rem;
    line-height: 1;
    text-align: center;
}
	.albums figcaption:hover {
    color: black;
    font-size: 0.6rem;
    line-height: 1;
    text-align: center;
} 
	.album-title {
	font-family : 'Montserrat', sans-serif;
	line-height: 1em ;
	font-weight: 300 ;
	font-style: normal;
	text-align: center;	
	color: white ;
}

It's a different effect and I'm not quite sure how I came upon it. Fumbling around with code lines..." creative accident" I guess.

I have two "hover" sections. One is called "thumbnail border hover" and "thumbnail title hover" but I think only one is valid. Somehow, that "thumbnail title hover" doesn't seem to do anything.
It's an attempt to change the title from white to black when hovering. But now, it's black and stays that way...more experimentation on the horizon, for sure.

Last edited by pideja (2018-03-02 00:15:58)

rod barbee · 2018-03-02 01:08:46

figure:hover p.album-title {
color:black;
}

With this, when you hover over the thumbnail, the text will turn black.

pideja · 2018-03-02 02:54:26

Works great, thanks!

Community @ The Turning Gate

#1 2018-02-23 00:59:29

Iconic thumbnail styling with CSS

#2 2018-02-23 01:29:35

Re: Iconic thumbnail styling with CSS

#3 2018-02-23 01:38:26

Re: Iconic thumbnail styling with CSS

#4 2018-02-23 03:28:48

Re: Iconic thumbnail styling with CSS

#5 2018-02-23 03:36:24

Re: Iconic thumbnail styling with CSS

#6 2018-02-23 03:58:12

Re: Iconic thumbnail styling with CSS

#7 2018-02-23 04:05:00

Re: Iconic thumbnail styling with CSS

#8 2018-02-23 04:15:55

Re: Iconic thumbnail styling with CSS

#9 2018-02-23 06:36:39

Re: Iconic thumbnail styling with CSS

#10 2018-02-25 01:31:07

Re: Iconic thumbnail styling with CSS

#11 2018-02-25 01:46:11

Re: Iconic thumbnail styling with CSS

#12 2018-02-28 04:05:09

Re: Iconic thumbnail styling with CSS

#13 2018-02-28 04:19:41

Re: Iconic thumbnail styling with CSS

#14 2018-02-28 04:30:02

Re: Iconic thumbnail styling with CSS

#15 2018-03-02 00:12:28

Re: Iconic thumbnail styling with CSS

#16 2018-03-02 01:08:46

Re: Iconic thumbnail styling with CSS

#17 2018-03-02 02:54:26

Re: Iconic thumbnail styling with CSS

Board footer