Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 23, 2015 at 11:46 pm #433819
    blankonblank

    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, 7 months ago by blankonblank.
    April 24, 2015 at 8:31 pm #434382
    Yigit

    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

    April 24, 2015 at 8:34 pm #434386
    blankonblank
    This reply has been marked as private.
    April 24, 2015 at 8:42 pm #434392
    Yigit

    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

    April 24, 2015 at 8:55 pm #434414
    blankonblank
    This reply has been marked as private.
    April 24, 2015 at 9:01 pm #434423
    Yigit

    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

    April 24, 2015 at 9:22 pm #434447
    blankonblank
    This reply has been marked as private.
    April 26, 2015 at 9:47 pm #434923
    Josue

    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

    April 27, 2015 at 12:56 am #434941
    blankonblank

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

    • This reply was modified 9 years, 7 months ago by blankonblank.
    April 27, 2015 at 3:37 am #434968
    Josue

    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

    April 27, 2015 at 3:28 pm #435312
    blankonblank

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

    April 27, 2015 at 5:00 pm #435420
    Josue

    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

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