Question about title posistion

  • Mark

    (@markdeafmcguire)


    8 years, 1 month ago

    Robin,

    Great plugin. I am using it successfully on my Genesis Framework child theme. I noticed you have included the option to use the Display Term Featured Image widget in the Widget section. While it works perfectly as advertised, I was wondering if there was a way to overlay the Term Title and/or Term Description over the image itself?

    Does my question make sense?

    In other words, without using the widget title and keep the featured image, term title and/or description as an all in one button of sorts that’s still accessible to screen readers?

    Thanks,

    Mark

Viewing 1 replies (of 1 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    Hey Mark! Yes, that should be totally doable with some CSS finagling. I did it on this site, in the footer widgets (first and second) with the post type widget. The term widget should behave very similarly.

    Here’s the relevant CSS:

    
.footer-widgets .widget-wrap {
  position: relative;
}

.footer-widgets .widget-wrap .widget-title {
  top: 93px;
  right: 0;
  left: 0;
  position: absolute;
  text-align: center;
  z-index: 100;
}

    Note that my title positioning could have been done better to give a true vertical centering–I don’t remember why I did it the way I did, but I’ve used something like this in the past:

    
.footer-widgets .widget-wrap .widget-title {
    right: 0;
    left: 0;
    position: absolute;
    text-align: center;
    z-index: 100;
    top: 0;
    bottom: 0;
    transform: translate(0,50%);
}

    (You would need the vendor prefixes for the transform property.) … It looks like I maybe need to add an aria-hidden attribute to the image if the title is displayed, but otherwise, just CSS. The images here are a custom image size.

    Just a note, if you do this kind of effect: if there is a lot of text due to a long title or description, that can do really wonky things with the visual layout. I would make sure that anything displayed here is always over a large image, or relatively short in terms of the text.

    Hope that helps get you started!

Viewing 1 replies (of 1 total)
  • The topic ‘Question about title posistion’ is closed to new replies.