Blog image overlay

Hey,

Please add the following code to the Quick CSS field in Enfold theme options > General Styling tab

.big-preview .image-overlay .image-overlay-inside::before {
  border-radius: 0;
  left: 25px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  top: 60px;
}

#top .big-preview .image-overlay {
  width: 60px !important;
  left: auto !important;
  right: 0;
  overflow: visible !important;
  opacity: 0.85 !important;
}

Best regards,
Yigit

Hi,
To always show the icon and prevent the hover animation I adjusted the css to this:

.big-preview .image-overlay .image-overlay-inside::before {
  border-radius: 0;
  left: 25px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  top: 60px;
}

#top .big-preview .image-overlay {
  width: 60px !important;
  left: auto !important;
  right: 0;
  overflow: visible !important;
  opacity: 0.85 !important;
background: transparent;
    top: 0px;
}
a:hover .image-overlay .image-overlay-inside {
    -webkit-animation: none;
    animation: none;
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
How do you want the white overlay always over the image or only on hover?
When I checked the overlay was only 60px wide on the right, I thought this was an error so I added background: transparent; to the css above, try removing this if you only wanted that.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike