Linking entire area of a slider image

[stardigit]

Hi Jason,

Using the Image Link feature in Slider Options only produces a small linking area in the upper-left of the image.

I’d like the entire image area to be clickable instead. Is it possible to accomplish this through CSS?

Topic

[Jason Bobich]

Hello,

Welcome to our new support forums. 🙂

I don’t generally provide customizations, but this is such a common question, I want to make sure this answer is here for you and everyone else.

So, from your Custom CSS, whether in your Theme Options page or in your Child theme’s custom.css, I think something like this should do the trick.

.element-slider .slide .image-link,
.element-slider .slide .image-link:hover {
    background-color: #fff; /* Triggers the anchor in IE */
    background-image: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

So, why not just have the theme setup like this in the first place?

The design of the image link element not covering the whole slide is something I do in most of my themes that use this same framework. The reason is because there are so many possible scenarios a slide could be setup with. Having the “image link” as an icon in the corner makes it so everything flows together.

For example, if the you were to select to show a description and a button over the slide, but also selected to show an image link, now you’d have a clickable element on top of a clickable element.

[stardigit]

Awesome, that works! And thanks for making an exception, very much appreciated.

[Author]

Replies