Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #433819

    Hi – How can you set it so icon always appears on an linked image? And if you don’t want the color overlay how do you remove that?

    • This topic was modified 9 years, 8 months ago by blankonblank.
    #434382

    Hi blankonblank!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .image-overlay { display: none !important; }
    
    .image-overlay { opacity: 0.7; }

    First line removes it and second one displays

    Cheers!
    Yigit

    #434386
    This reply has been marked as private.
    #434392

    Hey!

    Second line of code i posted should show it. If you would like remove white background, use the code as following

    .image-overlay {
      background: transparent !important;
      opacity: 1 !important;
    

    Cheers!
    Yigit

    #434414
    This reply has been marked as private.
    #434423

    Hi!

    Please try changing your code to following

    .play-button .image-overlay {
      background: transparent !important;
      opacity: 1 !important;
      left: -5px;
      top: 0px;
      overflow: hidden;
      display: block;
      height: 171px;
      width: 480px;
    }

    Best regards,
    Yigit

    #434447
    This reply has been marked as private.
    #434923

    Hey!

    Try with this code instead:

    .play-button .image-overlay {
     background: transparent !important;
     opacity: 1 !important;
     left: 0;
     top: 0px;
     overflow: hidden;
     display: block;
     height: 100%;
     width: 100%;
    } 

    Cheers!
    Josue

    #434941

    great as usual. thanks. But why doesn’t the icon overlay appear on mobile?

    • This reply was modified 9 years, 8 months ago by blankonblank.
    #434968

    Hey!

    Because the image overlay is not added on mobiles by default (this is an additional HTML node added via JS). We’d need to use another approach, remove all the previous play-button code and use this:

    .play-button a {
       position: relative;
    }
    
    .play-button a:after, .play-button a:before {
      content: '';
      position: absolute;
      background: red;
      color: white;
      font-size: 80px;
      height: 80px;
      width: 80px;
      line-height: 80px;
      display: block;
      top: 40%;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 250px;
    }
    
    /* Adjust this for smaller screens */
    @media only screen and (max-width: 767px) {
      .play-button a:after, .play-button a:before {
        font-size: 80px;
        height: 80px;
        width: 80px;
        line-height: 80px;
        top: 40%;
      }
    }
    
    .play-button a:before{
      z-index: 1;  
    }
    
    .play-button a:after {
      content: '\e801';
      font-family: 'fontello';
      z-index: 2;
    }
    
    /* Hide default Enfold overlay */
    .play-button .image-overlay {
      display: none !important;
    }

    Best regards,
    Josue

    #435312

    perfect. thanks. and if i want the icon smaller on smaller screens just change “font-size” ?

    #435420

    Yes, just change this part:

    /* Adjust this for smaller screens */
    @media only screen and (max-width: 767px) {
      .play-button a:after, .play-button a:before {
        font-size: 80px;
        height: 80px;
        width: 80px;
        line-height: 80px;
        top: 40%;
      }
    }

    Regards,
    Josue

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