Can't click on a link on my phone

Hi,

I've created some images with text (which are links) on them as a sort of menu. The site is http://www.identitymatching.nl. It works fine on my desktop but on a tablet or phone it just won't work. Could you please point out the problem? Many Thanks!

Julius

  • Dimitris

    Hey there Julius Huitema,

    hope you're doing good and thanks for reaching us! :slight_smile:

    It seems that your links are inside the overlay area which come up after you click on a box.
    This is happening with my Android phone too, clicking a box reveals the overlay text which is linked to another page.
    If you'd prefer a single-click experience then I'd rather propose to reconsider your design on those boxes.

    Let me know if I miss anything here!
    Warm regards,
    Dimitris

  • Julius Huitema

    Hi Dimitris,

    Thank you for your response! I would really like to keep the animation but I also want it to work on mobile devices... I first used a 3rd-party plugin for the same boxes, but it wasn't as responsive as i want (it gave me a lot of headaches). That plugin worked on mobile devices, so there should be a way to make my boxes work as well. I know only the basics of HTML and CSS, so it would be awesome if you could help me pin point what to do to make it work!

    Many Thanks!
    Julius

  • Pavle

    Hi Julius,
    try to add the following to the css:
    .hovereffect:focus .overlay {
    background-color: rgba(75, 75, 75, 0.8);
    }
    .hovereffect:focus h2 {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    }
    .hovereffect:focus a.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    }
    Regards,
    Pavle

  • Julius Huitema

    Hi Pavle,

    Unfortunately, nothing changed.. I left it in the CSS anyway, but here is the CSS as it was

    .hovereffect {
    width: 100%;
    height: 200px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    }

    .hovereffect .overlay {
    width: 100%;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: rgba(75,75,75,0.3);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    }

    .hovereffect:hover .overlay {
    background-color: rgba(75, 75, 75, 0.8);
    }

    .hovereffect img {
    display: block;
    position: relative;
    }

    .hovereffect h2 {
    font-family: avenir;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(148px);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    }

    .hovereffect:hover h2 {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    }

    .hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    color: #fff;
    border: 0px solid #fff;
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    font-weight: normal;
    margin: -10px 0 0 0;
    padding: 22px 15px;
    }

    .hovereffect:hover a.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    }

    .hovereffect a.info:hover {
    box-shadow: 0 0 0px #fff;
    }

    .img-responsive {
    max-width: 100%;
    }

  • Adam Czajczyk

    Hello guys!

    I'm not quite sure if we are all on the same side here so I'd like to make sure about the primary goal :slight_smile:

    I see how this is working on desktop. That's a well known effect when you hover over the image and the overlay (with some text) shows up and then after you click on it it takes you to another page. That's fine.

    That can actually work in a similar way if you test the site with some mobile device emulator where you still move your cursor using a mouse/touchpad device.

    On a real mobile device where you are using your finger on a touchscreen there's actually no "real on hover" effect so it's either a "double-click" (1st one triggers overlay and 2nd one executes link) or a single one that only does one of this actions: either shows up overlay or executes link.

    A third scenario that I can imagine is that you actually "touch the image" once and then it first shows overlay for a short while and then redirects to a target link. That would however require some additional JavaScript to be executed.

    Am I missing anything here? I just want to better understand the goal an make sure that we are all troubleshooting that very same issue here so let me know Julius Huitema please :slight_smile:

    Best regards,
    Adam

  • Julius Huitema

    Hi All,

    I think i've fixed it. The CSS looks like this now:
    .hovereffect {
    width: 100%;
    height: 200px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    }

    .hovereffect .overlay {
    width: 100%;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: rgba(75,75,75,0.3);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    }

    .hovereffect:hover .overlay {
    background-color: rgba(75, 75, 75, 0.8);
    }

    .hovereffect:focus .overlay {
    background-color: rgba(75, 75, 75, 0.8);
    }

    .hovereffect:focus h2 {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    }

    .hovereffect:focus a.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    }

    .hovereffect img {
    display: block;
    position: relative;
    }

    .hovereffect h2 {
    font-family: avenir;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-transform: translateY(45px);
    -ms-transform: translateY(45px);
    transform: translateY(148px);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    }

    .hovereffect:hover h2 {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
    }

    .hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    color: #fff;
    border: 0px solid #fff;
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    font-weight: normal;
    margin: -10px 0 0 0;
    padding: 22px 15px;
    }

    .hovereffect:hover a.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    }

    .hovereffect a.info:hover {
    box-shadow: 0 0 0px #fff;
    }

    .img-responsive {
    max-width: 100%;
    }

    .hovereffect {
    width: 100%;
    height: 200px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    }

    .hovereffect .overlay {
    width: 100%;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    }

    .hovereffect:hover .overlay {
    background-color: rgba(170,170,170,0.4);
    }

    .hovereffect h2, .hovereffect img {
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    }

    .hovereffect img {
    display: block;
    position: relative;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    }

    .hovereffect:hover img {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    }

    .hovereffect h2 {
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    }

    .hovereffect a.info {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 0px solid #fff;
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    font-weight: normal;
    position: absolute;
    top: 0%;
    left: 0%;
    padding: 100px 30px 70px 30px;
    }

    .hovereffect:hover a.info {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background-color: rgba(0,0,0,0.4);
    }