Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 14, 2019 at 11:30 am #1090579
    Daniel

    Hey!

    I’m trying to get an overlay on thumbnail images of a gallery. The gallery looks like this http://up.strila.nl/d12047 and my desired result is this http://up.strila.nl/39e0c3, so with the pink + sign in the center of the image. I’ve tried several CSS options but I’m not getting any good results.

    Can you help me get this right?

    Thanks! Daniel

    April 17, 2019 at 1:18 pm #1091991
    Victoria

    Hey Daniel,

    Please try the following css:

    
#top .avia-gallery .avia-gallery-thumb a:after {
  content: '+';
  color: #d89fde;
  font-size: 45px;
  font-weight: bold;
  top: -165px;
  left: 134px;
  position: relative;
}

    Best regards,
    Victoria

    April 17, 2019 at 3:42 pm #1092045
    Daniel

    Hi @Victoria,

    This works great for desktop, but when we go into other viewports it doesn’t stay centered. I tried to use percentages and calculations, but not with the result of the plus sign always staying centered. Any ideas on how to fix this?

    Regards, Daniel

    April 18, 2019 at 8:15 am #1092331
    Victoria

    Hi Daniel,

    You can use media queries to have different values for different screen sizes.

    Best regards,
    Victoria

    April 18, 2019 at 8:40 am #1092338
    Daniel

    Hi @victoria,

    Thanks for your answer, I’m sorry for not telling clearly enough that I am aware of that. In other media queries I tried to use percentages and calculations, but not with the result of the plus sign always staying centered. Any ideas on how to fix this?

    Regards, Daniel

    April 20, 2019 at 11:15 pm #1092985
    Mike

    Hi,
    Please try this instead:

    #top .avia-gallery .avia-gallery-thumb a:after {
  content: '+';
color: #d89fde;
  font-size: 45px;
  font-weight: bold;
 position: absolute !important; 
  width: 35%;
  height: 40%;
  display:flex!important;
  flex-direction:row!important;
  align-items: center!important;
  justify-content: center!important;
}

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.