focus elements not working properly on mobile

[Truk]

I am using .css to create a portfolio webpage for my art. I am using a floating box layout to display each piece of art separately with a .focus tag so when an image is clicked it expands, clicked again to return it to normal. The problem I am having is that the site works fine on desktops, but not on mobile devices (ipads). In the case of ipads (using safari), the .focus will work to expand an image, but I cannot return the image to its original state without refreshing the page. With Safari on my desktop, the image will return to its normal state, but I have to click away from it to do so.

I would like to keep this site .css/html only if possible.

This is stripped down .css code from the relevant style sheet:

<style>

  vert1{
    display:inline-block;
    width:150px;
    height:200px;
    position:relative;
    }
  vert1 img{
    width:auto%; 
    height:100%;
    position:absolute;
    z-index:1;
    -webkit-transition: all 0s ease;  
    -moz-transition: all 0s ease;  
    -o-transition: all 0s ease;  
    -ms-transition: all 0s ease;  
    transition: all 0s ease;  
    }
  vert1:focus{
    }
  vert1:focus img{
    width: auto;
    height: 80%;
    position: fixed;
    left: 20%;
    top: 10%;
    z-index: 25;
    -webkit-transition: all 0s ease;  
    -moz-transition: all 0s ease;  
    -o-transition: all 0s ease;  
    -ms-transition: all 0s ease;  
    transition: all 0s ease;  
    }
</style>

and this is its implementation in html:

<!--focus test-->
  <div class="img">
    <vert1 tabindex="1"><img src="7woman.jpg"></vert1><br />
    title/medium/size
  </div>

link to code in action (stripped down)

here is a link to the site http://www.kurtkindermann.com

Thank you!

[Paulie_D]

but not on mobile devices (ipads). In the case of ipads (using safari), the :focus will work to expand an image, but I cannot return the image to its original state without refreshing the page.

Does it work/revert if you :focus on another image?

TBH, I think you are verging into leveraging CSS into areas better served by Js/JQuery

[Truk]

It does work if I focus on another object! The problem being, I cannot clear it.

re: js/jquery — I am looking into that now, but would prefer not to use it, I am largely self taught and that’s a whole new language for me.

[Paulie_D]

That’s the problem with using :focus….it will retain that ‘status` until focus shifts elsewhere. There is nothing within CSS (AFAIK) that will alter that behaviour.

JS/JQuery would be a VERY simple answer. The function itself would only be a only be a few lines.

I could shift this thread to our Js/JQ section if you would like.

As an alternative, perhaps an CSS animation could fire on :focus that will expand the image for a set length of time (say 10 seconds) before going back to it’s normal state.

Actually, that might be a better user experience…….

[Truk]

Please, take this to the Js/JQ section if you don’t mind– thank you

It is good to know I’m not nuts, and that CSS just won’t do this. I like your proposed solution of timing it out, but I think that would hold people hostage if they had an errant click and I would prefer not to do that.

Based on what you said about focus needing to be directed somewhere- could I make the background focus-able? OR… could I somehow make the focused image responsive to another click? I’m going to guess “no” to both of those, but figured I’d ask–

thank you very much for your help– I look forward to learning some new JS!

[Paulie_D]

Moved to JS/JQ.

Let’s see what the others can come up with.

[Author]

Posts