Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Apr 2016
    Posts
    5
    Member #
    53972

    Help with Beautiful Free Bootstrap Theme

    Please find below link for a very sexy & free bootstrap theme for making a website.

    SHIELD - Free Bootstrap 3 Theme

    I am not web designer by profession, but I have limited knowledge with which i have made my entire website based on this theme. In portfolio section if seen on desktop it has a hover effect & as soon as we click on an image which is showcased .. a new lightbox pops out asking if we want to further explore the project.

    The problem is.. if/when viewed the portfolio image on mobile or any touch screen device "the whole hover effect" doesn't respond or work. After doing some research i found out that i need to add :Focus or :Active in the code along with :hover

    Can someone please let me know....... how do i do that or modify the code?? or where exactly the issue lies. The files with CSS, images Java scripts are available to download from the link mentioned above.

    IN NEED OF DESPERATE HELP! I would really appreciate if someone could spare 5 mins to resolve this. Please paste the modified code here if possible.. as i will just copy - paste that into my file..Attachment 5123

    Thanks in advance!





    Attached Images Attached Images

  2.  

  3. #2
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    That hover effect is handled by this bit of css (in main.css starting on line 566 of the original unmodified file):

    .no-touch .mask figure:hover figcaption, .mask figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
    }

    You could modify that to include :active and :focus like so:

    .no-touch .mask figure:hover figcaption, .mask figure:active figcaption, .mask figure:focus figcaption, .mask figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
    }

    I don't have any easy way to test on mobile to confirm that solves your problem, but that's how and where you'd add the selector you asked about.

    The whole concept of "hover" doesn't really exist with a touchscreen. so you may find it's a better user experience to just dispense with the whole "slide-up" effect and display that information all the time on mobile devices.

  4. #3
    Junior Member
    Join Date
    Apr 2016
    Posts
    5
    Member #
    53972
    YEAHHH! Khenney! Good freaking lord.. Thanks a ton! It worked YOU ARE THE MAN!

    But there is small issue. As hover and touch work completely in a different way... the menu pops out from below as i touch the image but as soon as i lift my finger up from the screen it goes down too quickly and doesn't allow user or rather doesn't give user enough time to click on the [TAKE A LOOK] - BUTTON which is placed on the blue box. Could you also tell me how can i tweak the speed of it going down? The ideal desired effect would be as soon as i touch the portfolio image the blue box should pop out and hang in there for 5 secs and then again slide down automatically..

    if you need to see my problem...... from your mobile or touchscreen device please visit my site and go to the portfolio
    TOAD - THE OFFICE OF ARCHITECTURE & DESIGN

    Once again! Really appreciate your help! Thanks a ton!

  5. #4
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    What sort of mobile device are you testing on? On my iPhone 6 the effects don't work even when touch the image, but I don't think :focus works the same on iphone as it does on Android.

  6. #5
    Junior Member
    Join Date
    Apr 2016
    Posts
    5
    Member #
    53972
    I am testing on Android OnePlus2 on latest update of Google chrome..

  7. #6
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    It doesn't look like it works on iOS, so you'll have to look for another solution unless you're okay with only supporting Android.

  8. #7
    Junior Member
    Join Date
    Apr 2016
    Posts
    5
    Member #
    53972
    I absolutely need iOS support..
    Any other direction you suggest I should take.. Is there any other thing instead of hover or :focus I should try applying..

  9. #8
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    I don't think there's a way to do what you want in pure CSS. I'd suggest showing the info bar all the time on touch devices, rather than having it slide up on hover/touch. You could do that by replacing the earlier code with this:

    .no-touch .mask figure:hover figcaption, .touch .mask figure figcaption, .mask figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
    }

  10. #9
    Junior Member
    Join Date
    Apr 2016
    Posts
    5
    Member #
    53972
    Thanks a ton! It really is what I needed. HI5! A final piece of advice do you know what controls the size & transparency of that blue box? Since it is visible all the time on touch devices, I would like it to be slightly slimer and transparent.

    Thanks again.. You have been really very helpful! Cheers..

  11. #10
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    You may not want to change the opacity - on a full size screen the portfolio image slides up, too, so a transparent box might look odd. If you want to try it out, though, the opacity is set by that same css code you replaced earlier, in the first line - just change opacity to something less than 1.

    opacity: .5; would give you 50% opacity for that box.

    The height is set on line 551, it starts with:

    .mask figcaption {
    height: 50px;
    ...}


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:57 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com