Menu icon Foundation
Add overlay on clearing featured image

Hi,

I'm stuck trying to add an overlay on the featured image for clearing in order to show touch based device that they can click on the picture.

I hope that someone can help me.

Thanks

clearingoverlay

Hi,

I'm stuck trying to add an overlay on the featured image for clearing in order to show touch based device that they can click on the picture.

I hope that someone can help me.

Thanks

Rafi Benkual over 5 years ago

Are you just trying to add the arrows back in?

These arrows are tied to a media query in the css that only displays on larger screens. This is due to the arrows being less useful on small screens. (mobile first)

You can add this custom css to make it work:

.clearing-main-prev, .clearing-main-next {
position: absolute;
height: 100%;
width: 40px;
top: 0; }
.clearing-main-prev > span, .clearing-main-next > span {
position: absolute;
top: 50%;
display: block;
width: 0;
height: 0;
border: solid 12px; }
.clearing-main-prev > span:hover, .clearing-main-next > span:hover {
opacity: 0.8; }
.clearing-main-prev {
left: 0; }
.clearing-main-prev > span {
left: 5px;
border-color: transparent;
border-right-color: #cccccc; }
.clearing-main-next {
right: 0; }
.clearing-main-next > span {
border-color: transparent;
border-left-color: #cccccc; }
.clearing-main-prev.disabled, .clearing-main-next.disabled {
opacity: 0.3; }

Working example http://cdpn.io/powEJ (click edit pen to see code)

We will look to add this as a data-option setting in Foundation 5.3

doGus over 5 years ago

No, what I mean is that I have a project section and for each projects a picture (using clearing) a title and description.

I would like to have an eye icon, text or whatever in overlay for touch device on the picture and only on hover for not touch device like that users know that they can click on the picture to see the gallery of the project.