This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Reply To: Linking entire area of a slider image

#321
Jason Bobich
Keymaster

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.