i would like to style this imagegallery here; https://www.obviotec.com/about-us/meet-the-team21-2/ „NAME" bold and bigger than "job title“.

This works fine in Safari using "first-line“ and css, but not in Firefox/Chrome, although it's applied to a block element. Does someone know why?

Here's the code:

<style>
/* <![CDATA[ */

 /*Galerie Image-Transformation OnHover
----------------------------------------------*/
#cc-m-9319617175 .ccgalerie .thumb_sq2 {
    background: #fff;
}
#cc-m-9319617175 .ccgalerie .thumb_sq2 img {
    transform: scale(1.00);
    transition: all 0.25s ease-in;
}
#cc-m-9319617175 .ccgalerie .thumb_sq2:hover img {
    transform: scale(1.02);
    opacity: 0.15;

}
#gallery_thumb_6016969275:hover:after,  
#gallery_thumb_6016969375:hover:after,
#gallery_thumb_6016969475:hover:after,
#gallery_thumb_6016969575:hover:after  {

    position: absolute;
    display: block;
    width: 150px;
    margin-top:-50px; margin-left:0px;
    z-index: 9999;
    font-size: 14px;
    font-weight:normal;
    color: white;
    text-align: center;
    background-color: #333;
}
#gallery_thumb_6016969275:first-line,
#gallery_thumb_6016969375:first-line,
#gallery_thumb_6016969475:first-line,
#gallery_thumb_6016969575:first-line {
    font-size: 18px;
    font-weight:bold;

} 
#gallery_thumb_6016969275:hover:after {content:"SERENA \a Marketing \a"; white-space: pre-wrap;}
#gallery_thumb_6016969375:hover:after {content: "Tim \a Marketing \a"; white-space: pre-wrap;}
#gallery_thumb_6016969475:hover:after {content: "Kaspar \a Marketing \a"; white-space: pre-wrap;}
#gallery_thumb_6016969575:hover:after {content: "Satrajit \a Marketing \a"; white-space: pre-wrap;} 

} 
/*]]>*/
</style>

CodePudding user response：

On Chrome if you use ::first-line in combination with ::after it doesn't work (I think it's the same for Firefox).

If you are not forced to use ::after to insert the name and title of the person I would avoid it and instead do:

.thumb_sq2 {
  position: relative;
  max-width: 150px;
}

.name-and-title-container {
  position: absolute;
  width: 100%;
  height: 150px;
  top: 0;
  background-color: transparent;
  opacity: 0;
}

.name-and-title-container:hover {
  opacity: 1;
}

.name-and-title {
  /*Layout*/
  position: absolute;
  bottom: 10px;
  width: 100%;
  height: 42px;
  
  /*Styling*/
  background-color: rgb(51,51,51);
  color: white;
  text-align: center;
}

.name {
  display: block;
  font-weight: bold;
}

.title {
  font-size: 0.7em;
}

<div class="thumb_sq2">
  <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=150x150:mode=crop:format=jpg/path/s7e799019368d9bb0/image/i29754b19be01ad53/version/1632830509/image.jpg" alt="">
  <div class="name-and-title-container">
   <div class="name-and-title">
     <span class="name">Name</span>
     <span class="title">Title</span>
    </div>
  </div>
</div>

I mean use anything rather than ::after, I used a <span> in my example but a <div> will do as well.