Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Caption | changing font size, color, placement, frame


JakeLake

Question

Site URL: https://www.konsulentoppdrag.no

Select 'presentasjon' + enter PW = konsulent2022

Using this code:

p.gallery-caption-content {
    font-size: 20px !important;
      font-weight: bolder;
    color: #F2BA40;
      padding-top: 100px !important;
}

1. Font weight does not seem to be working ie. bold or bolder
2. First square 'Analyse & Markedsundersøkelser' - how to I narrow the gap between lines (used shift+enter for caption text)
3. On hover gold frame around picture?

Edited by JakeLake
new info
Link to comment

8 answers to this question

Recommended Posts

  • 0
22 hours ago, JakeLake said:

Site URL: https://www.konsulentoppdrag.no

Select 'presentasjon' + enter PW = konsulent2022

Using this code:

p.gallery-caption-content {
    font-size: 20px !important;
      font-weight: bolder;
    color: #F2BA40;
      padding-top: 100px !important;
}

1. Font weight does not seem to be working ie. bold or bolder
2. First square 'Analyse & Markedsundersøkelser' - how to I narrow the gap between lines (used shift+enter for caption text)
3. On hover gold frame around picture?

Use this new code

p.gallery-caption-content {
    font-size: 20px !important;
    color: gold;
    padding-top: 200px !important;
    font-weight: 900 !important;
    line-height: 20px !important;
}
figure:hover {
    border: 3px solid gold;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Remove previous CSS code and try with these CSS code

[data-section-id="61e99335f5b8f86607fd6963"] {
  .gallery-grid-item {
    overflow: hidden;
    img{
      -webkit-filter: grayscale(1);
      transition: 0.2s;
    }
    position: relative;
    .gallery-caption{
      opacity: 0 !important;
      transition-delay: 0ms !important;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 0 !important;
      .gallery-caption-wrapper{
        display: flex;
        justify-content: center;
    	align-items: flex-end;
        padding-bottom: 10vh;
        box-sizing: border-box;
        border: 3px solid gold;
        p.gallery-caption-content{
          font-size: 23px !important;
          color: gold;
          font-weight: 900 !important;
          line-height: 20px !important;
        }
        @media(max-width: 767px){
          padding-bottom: 15px !important;
          p{
            font-size: 20px !important;
          }
        }
      }
    }
  }
  .gallery-grid-item:hover {
    overflow: hidden;
    img{
      -webkit-filter: grayscale(0) !important;
      transform: scale(1.01);
    };
    .gallery-caption{
      opacity: 1 !important;
    }
  }
}

 

Edited by Web_Solutions
Link to comment
  • 0
Posted (edited)

EXCELLENT - however, mobile text overflows images....also would like to move the text lower?

www.konsulentoppdrag.no >> Presentasjon + new PW = FlereKonsulenter2025

Edited by JakeLake
new info
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...