In “La Doce,” a largely Indigenous, Latino, immigrant area, our work aims to restore regenerative wealth and power to the community itself through the creation of a Community Land Trust (CLT) with an urban environmental focus.
This is the effect I want
this one is achieved with manually adjusting effects/transform/translate
that works, but it is inaccurate. There is only px control, not %.
I want to make both content containers both be set to the exact center of the outer container, so it can resize and accommodate different length text.
Can’t make z-height do anything. Tried various combos of Flex vs block and relative vs default. Don’t know what flex-child even does!
Hover effects are defined on outer container targeting class of content. I’ve tried targeting both the content itself vs its inner container. If I just apply the hover to the inner content, then you have to be precise about where you hover. I want the whole grid container to be ‘hot”
A virtual marketplace where heritage based artists can sell work, network, and preserve cultural knowledge.
Hover effects defined on outer container
outer container set to wrap
Inner containers set to 100% high
inner containers set to no wrap
Visibility set to default
usually only the top container shows
The second content container (logo) is not shown, is it “off screen?”
when I click on the logo container in the backend and logo appears, it IS in the center. (which container appears on the back end varies from refresh to refresh. Not sure why. Is something conflicting?)
A virtual marketplace where heritage based artists can sell work, network, and preserve cultural knowledge.
Hover effects defined on outer container
outer container set to wrap
Inner containers set to 100% high
Set all containers to “visible” and now you can see the logo in this column
Not sure why it is stacking side by side when the container flex is set to column, not row…
only the top container shows (inner containers set to no wrap- nothing changes either way)
Is the answer to just effect/transform/translate the logo to the center?
A virtual marketplace where heritage based artists can sell work, network, and preserve cultural knowledge.
Hover effects defined on outer container
outer container set to wrap
Inner containers set to 100% high
Set all containers to “visible”
effect/transform/translate the logo to the center with -295, it IS vertically centered correctly…but the translate requires exact pixels. (and therefore a fixed width of outer container)
A virtual marketplace where heritage based artists can sell work, network, and preserve cultural knowledge.
Same settings as above but width set to 50%
The Translate amount doesn’t work anymore.
Our beloved annual celebration of the living traditional arts of Southern Arizona’s diverse ethnic and folk communities.
Hover effects defined on outer container
Inner containers set to 100% high
inner containers set to wrap so now you see where the second container is below the first
Learn more about what folklife is and “how to think like a folklorist” in our magazine, Borderlore
Trying to get the two inner containers to stack in the z-axis in the center of the outer container
Hover effects defined on outer container
Inner containers set to 100% high
Inner containers set to no wrap
Logo container z-height 10
Blurb container z-height 5
Learn more about what folklife is and “how to think like a folklorist” in our magazine, Borderlore
Hover effects defined on outer container
Inner containers set to 100% high with auto margin top and bottom
Learn more about what folklife is and “how to think like a folklorist” in our magazine, Borderlore
Hover effects defined on outer container
All containers set to Block (not flex)
positions set to relative
100% tall
Learn more about what folklife is and “how to think like a folklorist” in our magazine, Borderlore
Hover effects defined on outer container
image set as background of outer container
Can’t figure out how to add padding to the image or how to make the background image disappear on hover
Learn more about what folklife is and “how to think like a folklorist” in our magazine, Borderlore
remove all effects from containers in GB
add these classes to containers .hovercont / .logocont / .blurbcont
add this css to site:
.gb-container.logocont { height: 100%; opacity: 1; transition: all 0.4s ease; }
.gb-container.blurbcont { height: 0; opacity:0; transition: all 0.4s ease; }
a.gb-container.hovercont:hover .logocont { height: 0; opacity: 0; }
a.gb-container.hovercont:hover .blurbcont { height: 100%; opacity: 1; }
more reliable for sure, but not loving that hover effect is again relying on cursor placement, and the scroll into place is not fab
Learn more about what folklife is and “how to think like a folklorist” in our magazine, Borderlore
remove all effects from containers in GB
add these classes to containers .hovercont / .logocont / .blurbcont
make sure hovercont position is set to relative
add this css to site:
.gb-container.logocont { height: 100%; opacity: 1; transition: all 0.4s ease; }
.gb-container.blurbcont { opacity:0; transition: all 0.4s ease; position: absolute; }
a.gb-container.hovercont:hover .logocont { opacity: 0; position: absolute; z-index:-1; }
a.gb-container.hovercont:hover .blurbcont { opacity: 1; position: relative; z-index:2; }
Learn more about what folklife is and “how to think like a folklorist” in our magazine, Borderlore
Fiddling with the settings a little (removed the a. Removing more broke the effect)
turned the transition back on the outer container that target the inner content so it isn’t as specific where you hover
no translate effects
add these classes to containers .hovercont / .logocont / .blurbcont
make sure hovercont position is set to relative
add this css to site:
.gb-container.logocont { height: 100%; }
.gb-container.blurbcont { position: absolute; }
.gb-container.hovercont:hover .logocont { position: absolute; z-index:-1; }
.gb-container.hovercont:hover .blurbcont { position: relative; z-index:2; }
